css - css で別の div にカーソルを合わせると、div の不透明度を変更できますか?

Question

順序付けられていないリストを含む div と、画像を含む div があります。リストの上にカーソルを置いたときに画像を透明にできるようにしたい。

それはcssを使用して可能ですか、それともjQueryを使用する必要がありますか?

Answer 1

画像がリストの後にある場合は、これを行うことができます - http://jsfiddle.net/WYqSu/

HTML

<div>
    <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ul>
</div>

<p> some text </p>

<div id="image">
    <img src="http://lorempixel.com/200/100" />
</div>

CSS

div:hover ~ div#image {
    opacity: .2;
}