CSS3だけで、ユーザーがその子にカーソルを合わせると、親オブジェクトに影響を与えることは可能ですか?
すなわち
<div class="random">
<img src="image.png">
</div>
.random img:hover {
somehow affect .random?
}
JQuery や JS などで簡単にできることはわかっていますが、できるだけ JS から離れたいと思っています。
CSS3だけで、ユーザーがその子にカーソルを合わせると、親オブジェクトに影響を与えることは可能ですか?
すなわち
<div class="random">
<img src="image.png">
</div>
.random img:hover {
somehow affect .random?
}
JQuery や JS などで簡単にできることはわかっていますが、できるだけ JS から離れたいと思っています。
現在、css のみを使用することは不可能ですが、内側の要素にカーソルを合わせたときに親の背景を変更するなどの簡単なことをしたい場合は、兄弟を使用して背景をシミュレートできます。このようにして、「+」セレクターを使用して結果を得ることができます。
<div class="container">
<span class="content">something</span>
<span class="bg"></span>
</div>
ただし、これを行うには、絶対配置を使用して作業し、センタリングや明示的な寸法などの副作用に対処する必要があります。例を次に示します: http://jsfiddle.net/PYN6P/