在懸停發生在不同的元素上時在元素上設置CSS樣式

我在佈局中有兩個圖像。他們的佈局不能改變。當我將鼠標懸停在svg圖像上時，我更改了填充顏色。如果我將鼠標懸停在第一張圖片上，我也想更改svg的填充顏色。這可能嗎？懸停事件發生在第一個圖像而不是根div上是非常重要的。在懸停發生在不同的元素上時在元素上設置CSS樣式

https://jsfiddle.net/Deepview/3awtx16v/

<div class="outer"> 
    <img src="https://i.pinimg.com/originals/11/94/f3/1194f3b0cb86afdf0d610e7b0b105826.png" /> 
    <div> 
     <svg enable-background="new 0 0 128 128" height="128px" id="Layer_1" version="1.1" viewBox="0 0 128 128" width="128px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M64,128C28.71,128,0,99.29,0,64C0,28.71,28.71,0,64,0c35.29,0,64,28.71,64,64C128,99.29,99.29,128,64,128z M64,10 c-29.776,0-54,24.224-54,54c0,29.775,24.224,54,54,54c29.775,0,54-24.225,54-54C118,34.224,93.775,10,64,10z"/></g><g><path d="M46.001,40.51c0-3.523,2.489-4.954,5.534-3.179L91.718,60.77c3.044,1.775,3.044,4.68,0,6.457L51.534,90.668 C48.49,92.443,46,91.014,46,87.49L46.001,40.51L46.001,40.51z"/></g></svg> 
    </div> 
</div> 

svg:hover { 
    fill: #ff0000; 
}

來源

2017-09-01 AndroidDev

在這種情況下是沒有問題的。使用Adjacent sibling selector

svg:hover { 
 
    fill: #ff0000; 
 
} 
 

 
.outer img:hover + div svg { 
 
    fill: green; 
 
}

<div class="outer"> 
 
    <img src="https://i.pinimg.com/originals/11/94/f3/1194f3b0cb86afdf0d610e7b0b105826.png" /> 
 
    <div> 
 
     <svg enable-background="new 0 0 128 128" height="128px" id="Layer_1" version="1.1" viewBox="0 0 128 128" width="128px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M64,128C28.71,128,0,99.29,0,64C0,28.71,28.71,0,64,0c35.29,0,64,28.71,64,64C128,99.29,99.29,128,64,128z M64,10 c-29.776,0-54,24.224-54,54c0,29.775,24.224,54,54,54c29.775,0,54-24.225,54-54C118,34.224,93.775,10,64,10z"/></g><g><path d="M46.001,40.51c0-3.523,2.489-4.954,5.534-3.179L91.718,60.77c3.044,1.775,3.044,4.68,0,6.457L51.534,90.668 C48.49,92.443,46,91.014,46,87.49L46.001,40.51L46.001,40.51z"/></g></svg> 
 
    </div> 
 
</div>

來源

2017-09-01 09:41:50 caramba

請記住，這個解決方案只有在你的HTML完全像這樣。 – Roberrrt

不確定「+」。該文檔陳述「任何匹配B的元素，它是匹配A的元素的下一個兄弟（即：同一父元素的下一個子元素）」。感謝一百萬人來說明「+」是如何工作的。 – AndroidDev

也許你想是這樣的：

img:hover + div svg { 
    fill: #ff0000; 
}

其中+我稱之爲鄰居選擇，雖然當兩個坐在對方旁邊這個只適用。

希望可以幫到

來源

2017-09-01 09:44:35 masterpreenz

在懸停發生在不同的元素上時在元素上設置CSS樣式

回答

相關問題