jQuery - 减少鼠标悬停时图像的不透明度

Question

我想要实现的是,当您将鼠标悬停在图像上时,其不透明度将减少到一半.我必须在这里做一个明显的错误,但无法弄清楚到底是什么.任何提示将不胜感激.

http://jsfiddle.net/bUHVc/1/

   <a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>

 $('.arrow').hover(
function() {
     $(this).find('img').fadeTo('slow', 0.5);
},
function() {
     $(this).find('img').fadeTo('slow', 1);
 }
);

Answer 1

一个更好的解决方案是简单地完成它CSS,而不添加任何javascript,所以你可以添加一个类并用你的所有图像来完成它,例如:

.arrow:hover {
  opacity: 0.5;
}

如果你想慢速过渡,你可以在这里看一下自定义效果.