如何更改图像的不透明度？

Question

<script type="text/javascript">
$(document).ready(function(){
  $('#logo').mouseenter(function() {
    $('#logo').fadeTo("fast",0.3);
  });

  $('#logo').mouseleave(function() {
    $('#logo').fadeTo("fast",1)
  });
});
</script>

我这样做是为了在用光标悬停在图像上时更改图像的不透明度，但这不会发生。 :(

Answer 1

您不需要jQuery，可以使用CSS：

HTML示例-您需要具有ID logo 。

<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />

CSS

#logo {
    opacity: 1;
    filter:alpha(opacity=100);
    transition: opacity 0.2s linear 0s;
    -webkit-transition: opacity 0.2s linear 0s;
}

#logo:hover {
    opacity: 0.3;
    filter:alpha(opacity=30);
    transition: opacity 0.2s linear 0s;
    -webkit-transition: opacity 0.2s linear 0s;
}

http://jsfiddle.net/pFEdL/2/

Answer 2

您的图片的HTML外观如何？ 是否嵌入其他div中？

因此：jQuery mouseenter（）vs mouseover（）

正如gilly3在上述问题中指出的那样：“每次鼠标进入或离开子元素时，都会触发鼠标悬停，但不会进入mouseent”。