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

【问题标题】：jQuery - reduce opacity of image on mouseoverjQuery - 减少鼠标悬停时图像的不透明度
【发布时间】：2013-10-30 15:00:32
【问题描述】：

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

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

【问题讨论】：

你需要包含 jquery 并删除 .find()
你也可以通过 css opacity 来实现。 w3schools.com/css/css_image_transparency.asp

标签： jquery html css hover fadeto

【解决方案1】：

我已经更新了你的 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>

【讨论】：

【解决方案2】：

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

.arrow:hover {
  opacity: 0.5;
}

如果您想要缓慢的过渡，您可以查看here 来自定义效果。

【讨论】：

【解决方案3】：

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

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

【讨论】：