1

我想要实现的是，当您将鼠标悬停在图像上时，其不透明度将降低到一半。我一定在这里犯了一个明显的错误，但无法弄清楚到底是什么。任何提示将不胜感激。

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);
 }
);
4

3 回答 3

8

一个更好的解决方案是在 simple 中执行此操作CSS，而不添加任何 javascript，因此您只需添加一个类并使用所有图像执行此操作，例如：

.arrow:hover {
  opacity: 0.5;
}

如果你想要缓慢的过渡，你可以看这里来自定义效果。

于 2013-10-21T22:41:24.767 回答
0

您需要包含 jQuery。此外，要么删除.find()并将你的类名移动到 img 元素，要么.children()改用。

更新小提琴：http: //jsfiddle.net/bUHVc/3/

于 2013-10-21T22:40:31.260 回答
0

我已经更新了你的 jsfiddle - http://jsfiddle.net/bUHVc/6/

您缺少 jquery 的包含。此外，您的代码中不需要 find("img") 行。您可以使用 animate() 函数轻松完成您要查找的内容。

jQuery

$(".arrow").hover(function(){
   $(this).stop().animate({"opacity": "1"}); 
}, function(){
   $(this).stop().animate({"opacity": "0.5"});
});

CSS：

.arrow{
   opacity: 0.5;
}

的HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>
于 2013-10-21T22:46:36.623 回答