Question

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

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

如果您想要慢速转换，只需查看here即可自定义效果。

Answer 2

您需要包含jQuery。另外，请删除.find()并将您的类名移至img元素，或使用.children()代替。

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

Answer 3

我已更新您的jsfiddle - http://jsfiddle.net/bUHVc/6/

你错过了jquery的include。此外，您的代码中不需要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>

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

3 个答案: