ホバリングが異なる要素で発生した場合、要素にCSSスタイルを設定します。

レイアウトに2つの画像があります。レイアウトは変更できません。 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

"+"についてはわかりませんでした。ドキュメントには、「Aと一致する要素の次の兄弟であるBと一致する任意の要素（つまり、同じ親の次の子）」と記載されています。 "+"がどのように動作するかを説明するための100万のおかげです。 – AndroidDev

はおそらく、あなたがこのような何かをしたい使用してください：

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

どこ+両方がお互いの横に座ったときにこの1つはのみ動作しますけれども、私は隣のセレクタを呼んでいるもの。

希望があります

出典

2017-09-01 09:44:35 masterpreenz

ホバリングが異なる要素で発生した場合、要素にCSSスタイルを設定します。

答えて

関連する問題