当我将鼠标悬停在css中的另一个div上时，我可以更改div的不透明度吗？(Can I change a div's opacity, when hovering over another

当我将鼠标悬停在css中的另一个div上时，我可以更改div的不透明度吗？(Can I change a div's opacity, when hovering over another div in css?)

我有一个包含无序列表的div和一个包含图像的div。 当我将鼠标悬停在列表上时，我希望能够使图像变得透明。

是可以使用css，还是我需要使用jQuery？

I have a div containing an unordered list, and a div containing an image. I want to be able to make the image go transparent when I hover over the list.

Is that possible using css, or do I need to use jQuery?

最满意答案

如果你的图像在列表之后，你可以这样做 - 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; }

If your image goes after the list you can do this - 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; }