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

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/