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

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”。