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')">

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

当我将鼠标悬停在css中的另一个div上时，我可以更改div的不透明度吗？

3 个答案: