仅限CSS的解决方案

Question

我有4个div，当他们每个人background-color转换为某种颜色时。现在我想点击它们时每个都用SVG标签改变一个圆圈的颜色。我的代码如下：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我能用CSS做这个吗？因为我不想使用JavaScript或JQuery ......

Answer 1

这可以通过使用单选按钮进行一些技巧来完成基本上你将圆圈颜色链接到选中的单选按钮

#a1:checked~svg circle {
  /*the style here will apply when the radio button with id = a1 is checked */
}

见下面的代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

仅限CSS的解决方案

（使用复选框（好吧，在这种情况下是单选按钮）hack）

＆＃13;

[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 }

＆＃13;

<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>

＆＃13;

话虽如此，纯CSS解决方案并不总是意味着最佳解决方案。

简单的JS解决方案：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

你应该使用Javascript。这是你可以做到的一种方式：

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

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

<强> JQUERY：

$(document).ready(function(){

  var color;

  $("#colorOptions .item").click(function(){
    color = $(this).css("backgroundColor");
    $("#b circle").css("fill", color);
  })

})

如何在点击div时更改圆圈颜色？

3 个答案:

仅限CSS的解决方案

简单的JS解决方案：