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;
}

Answer 2

如果 image-div 包含在 ul-div 中，则可以使用 CSS，否则需要使用 JS。

<div id="divtop">
 <ul>
  <li>listitem</li>
 </ul>
 <div id="divinner">
  <img />
 </div>
</div>

<style>
 #divtop:hover #divinner>img
 {
    /* set opacity */
 }
</style>

Answer 3

我使用 javascript 来实现类似的结果：

javscript:

function changeOpacity (opacity) {
        document.getElementById("element_ID_to_alter").style.opacity = opacity;
    }

HTML:

<div id="hover_div" onmouseover="changeOpacity('.3')" onmouseout="changeOpacity('1.0')">

我对此结果感到非常满意。我希望它可以帮助你！