How can I alter the color of a circle when a div is clicked on?

Question

How can I alter the color of a circle when a div is clicked on?

When I hover over 4 divs, their background color changes. Now, I want to click on each of them to change the color of a circle inside an SVG tag. Below are my codes:

#a1,
#a2,
#a3,
#a4 {
  display: inline-block;
  position: relative;
  border: 2px solid black;
  width: 100px;
  height: 100px;
}

#a1:hover {
  background-color: orangered;
}

#a2:hover {
  background-color: green;
}

#a3:hover {
  background-color: blue;
}

#a4:hover {
  background-color: yellow;
}

<div style="width:25%; margin:auto; text-align:center;">
  <div id="a1"></div>
  <div id="a2"></div>
  <div id="a3"></div>
  <div id="a4"></div>
</div>

<svg id="b" height="100" width="100">
   <circle cx="50" cy="50" r="40"  />
</svg>

Is it possible to achieve this using only CSS without JavaScript or JQuery?

html css svg

Answer 1

Answer №1

To achieve this effect, you can use a clever trick involving radio buttons where the circle color is linked to the checked radio button.

#a1:checked~svg circle {
  /*The style specified here will be applied when the radio button with id = a1 is checked.*/
}

Take a look at the code below:

#l1,
#l2,
#l3,
#l4 {
  display: inline-block;
  position: relative;
  border: 2px solid black;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#l1:hover {
  background-color: orangered;
}

#l2:hover {
  background-color: green;
}

#l3:hover {
  background-color: blue;
}

#l4:hover {
  background-color: yellow;
}

.check-btn input {
  display: none;
}

#a1:checked~svg circle {
  fill: orangered;
}

#a2:checked~svg circle {
  fill: green;
}

#a3:checked~svg circle {
  fill: blue;
}

#a4:checked~svg circle {
  fill: yellow;
}

<div class="check-btn">

  <input id="a1" type="radio" name="color">
  <label id="l1" for="a1" class="clicker"></label>
  <input id="a2" type="radio" name="color">
  <label id="l2" for="a2" class="clicker"></label>
  <input id="a3" type="radio" name="color">
  <label id="l3" for="a3" class="clicker"></label>
  <input id="a4" type="radio" name="color">
  <label id="l4" for="a4" class="clicker"></label>

  <svg id="b" height="100" width="100">
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>

Answer 2

To achieve this effect, you can use a clever trick involving radio buttons where the circle color is linked to the checked radio button.

#a1:checked~svg circle {
  /*The style specified here will be applied when the radio button with id = a1 is checked.*/
}

Take a look at the code below:

#l1,
#l2,
#l3,
#l4 {
  display: inline-block;
  position: relative;
  border: 2px solid black;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#l1:hover {
  background-color: orangered;
}

#l2:hover {
  background-color: green;
}

#l3:hover {
  background-color: blue;
}

#l4:hover {
  background-color: yellow;
}

.check-btn input {
  display: none;
}

#a1:checked~svg circle {
  fill: orangered;
}

#a2:checked~svg circle {
  fill: green;
}

#a3:checked~svg circle {
  fill: blue;
}

#a4:checked~svg circle {
  fill: yellow;
}

<div class="check-btn">

  <input id="a1" type="radio" name="color">
  <label id="l1" for="a1" class="clicker"></label>
  <input id="a2" type="radio" name="color">
  <label id="l2" for="a2" class="clicker"></label>
  <input id="a3" type="radio" name="color">
  <label id="l3" for="a3" class="clicker"></label>
  <input id="a4" type="radio" name="color">
  <label id="l4" for="a4" class="clicker"></label>

  <svg id="b" height="100" width="100">
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>

Answer 3

Answer №2

Using Pure CSS

(employing the checkbox (or radio button) hack)

[name='c'] {
position: absolute;
right: 100%
}

#black:checked ~ svg circle { fill: black }
#purple:checked ~ svg circle { fill: purple }
#hotpink:checked ~ svg circle { fill: hotpink }
#orange:checked ~ svg circle { fill: orange }

<input type='radio' name='c' id='black' checked/>
<input type='radio' name='c' id='purple'/>
<input type='radio' name='c' id='hotpink'/>
<input type='radio' name='c' id='orange'/>

<div style='width:25%; margin:auto; text-align:center;'>
<div id='a1'><label for='black'>black</div>
<div id='a2'><label for='purple'>purple</div>
<div id='a3'><label for='hotpink'>hotpink</div>
<div id='a4'><label for='orange'>orange</div>
</div>

<svg id='b' height='100' width='100'>
<circle cx='50' cy='50' r='40'  />
</svg>

Keep in mind, opting for a purely CSS solution may not always be the optimal choice.

A Basic JS Approach:

const _C = document.querySelector('circle');

addEventListener('click', e => {
const _T = e.target;

if(_T.id.match(/a[1-4]/)) {
_C.setAttribute('fill', _T.textContent)
}
}, false);

<div style='width:25%; margin:auto; text-align:center;'>
<div id='a1'>black</div>
<div id='a2'>purple</div>
<div id='a3'>hotpink</div>
<div id='a4'>orange</div>
</div>

<svg id='b' height='100' width='100'>
<circle cx='50' cy='50' r='40'  />
</svg>

Answer 4

Using Pure CSS

(employing the checkbox (or radio button) hack)

[name='c'] {
position: absolute;
right: 100%
}

#black:checked ~ svg circle { fill: black }
#purple:checked ~ svg circle { fill: purple }
#hotpink:checked ~ svg circle { fill: hotpink }
#orange:checked ~ svg circle { fill: orange }

<input type='radio' name='c' id='black' checked/>
<input type='radio' name='c' id='purple'/>
<input type='radio' name='c' id='hotpink'/>
<input type='radio' name='c' id='orange'/>

<div style='width:25%; margin:auto; text-align:center;'>
<div id='a1'><label for='black'>black</div>
<div id='a2'><label for='purple'>purple</div>
<div id='a3'><label for='hotpink'>hotpink</div>
<div id='a4'><label for='orange'>orange</div>
</div>

<svg id='b' height='100' width='100'>
<circle cx='50' cy='50' r='40'  />
</svg>

Keep in mind, opting for a purely CSS solution may not always be the optimal choice.

A Basic JS Approach:

const _C = document.querySelector('circle');

addEventListener('click', e => {
const _T = e.target;

if(_T.id.match(/a[1-4]/)) {
_C.setAttribute('fill', _T.textContent)
}
}, false);

<div style='width:25%; margin:auto; text-align:center;'>
<div id='a1'>black</div>
<div id='a2'>purple</div>
<div id='a3'>hotpink</div>
<div id='a4'>orange</div>
</div>

<svg id='b' height='100' width='100'>
<circle cx='50' cy='50' r='40'  />
</svg>

Answer 5

Answer №3

If you want to change the color dynamically using JavaScript, here is a simple solution:

<div id="colorChoices" style="width:30%; margin:auto; text-align:center;">
        <div class="option" id="choice1"></div>
        <div class="option" id="choice2"></div>
        <div class="option" id="choice3"></div>
        <div class="option" id="choice4"></div>
    </div>

    <svg id="canvas" height="100" width="100">
        <circle cx="50" cy="50" r="40" />
    </svg>

USING JQUERY:

$(document).ready(function(){

  var selectedColor;

  $("#colorChoices .option").click(function(){
    selectedColor = $(this).css("backgroundColor");
    $("#canvas circle").css("fill", selectedColor);
  })

})

Answer 6

If you want to change the color dynamically using JavaScript, here is a simple solution:

<div id="colorChoices" style="width:30%; margin:auto; text-align:center;">
        <div class="option" id="choice1"></div>
        <div class="option" id="choice2"></div>
        <div class="option" id="choice3"></div>
        <div class="option" id="choice4"></div>
    </div>

    <svg id="canvas" height="100" width="100">
        <circle cx="50" cy="50" r="40" />
    </svg>

USING JQUERY:

$(document).ready(function(){

  var selectedColor;

  $("#colorChoices .option").click(function(){
    selectedColor = $(this).css("backgroundColor");
    $("#canvas circle").css("fill", selectedColor);
  })

})

How can I alter the color of a circle when a div is clicked on?

Answer №1

Answer №2

Using Pure CSS

A Basic JS Approach:

Answer №3

Similar questions

Distances measured in relation to the present Div

Looking to switch up the hide/show toggle animation?

Insert at the beginning of the element only if the class is 'active'

Enhancing jQuery Mobile listview with voting buttons on each item row

Is it safe to use handlebars' default escaping in HTML attributes?

jquery event delegation doesn't function properly on statically rendered content

The text input is malfunctioning in the IE web browser

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

Open up the index.html page whenever the page is refreshed

What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Can anyone suggest a method to set up a group chat without the need for a database?

Is there a more concise method to achieve this in JavaScript? (details below)

Can you use CSS to target a parent div based on the elements it contains?

Setting cards to have the same height in a Vue JS card set

I am having trouble displaying an image on a page within my Vuetify project

Encountering difficulties loading Google Maps with jQuery

When using JavaScript to style.display = "block", the Bootstrap-4 column layout may experience a display break

Map / Area enveloped in darkness

Is it possible to assign ng-model to multiple values simultaneously?