如何在點擊div時更改圓形顏色？

Question

我有4個div的時候把它們中的每一個都改爲background-color改成某種顏色。現在我想要點擊其中的每一個都用SVG標籤改變一個圓的顏色。我的代碼如下所示：

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

我能做到這一點只是CSS？因爲我不想使用JavaScript或JQuery ...

Answer 1

這可以用招數一點點使用單選按鈕 完成基本上你的圈子顏色鏈接到檢查單選按鈕

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

看到波紋管的代碼：

#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

您應該使用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); 
    }) 

}) 

Answer 3

CSS-只溶液

（使用複選框（當然，在這種情況下單選按鈕）劈）

[name='c'] { 
 
\t position: absolute; 
 
\t 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;'> 
 
\t <div id='a1'><label for='black'>black</div> 
 
\t <div id='a2'><label for='purple'>purple</div> 
 
\t <div id='a3'><label for='hotpink'>hotpink</div> 
 
\t <div id='a4'><label for='orange'>orange</div> 
 
</div> 
 

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

即據說，這是一個純粹的CSS解決方案並不總是意味着最好的解決方案。

---

簡單的JS解決方案：

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

 
addEventListener('click', e => { 
 
\t const _T = e.target; 
 
\t 
 
\t if(_T.id.match(/a[1-4]/)) { 
 
\t \t _C.setAttribute('fill', _T.textContent) 
 
\t } 
 
}, false);

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

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