鼠标输入，鼠标离开，悬停 jQuery答案

【问题标题】：mouseenter, mouseleave, hover jQuery鼠标输入，鼠标离开，悬停 jQuery
【发布时间】：2011-02-15 10:12:18
【问题描述】：

我在处理这些事件时遇到了问题。我不确定什么是最好用的。我正在尝试根据鼠标的位置制作一些不透明动画。

我有这些结构

    <div class="thumbnail-wrapper">
<a href="#">         
<img class="thumb" src="image/image1.png" />
</a>
<a href="#">    
<img class="thumb" src="image/image2.png" />
</a>
<a href="">    
<img class="thumb" src="image/image3.png" />
</a>
<a href="#">    
<img class="thumb" src="image/image4.png" />
</a>
<a href="#">    
<img class="thumb" src="image/image5.png" />
</a>    
</div>

基本上，我想做的是每当鼠标进入图像时，其余图像（除了鼠标所在的位置）都会进行动画不透明度更改，即：$(img).stop().not(this).animate({"opacity":"0.4"}) 并且一只鼠标所在的位置将动画为 opacity:1。

请帮助解决此问题的最佳方法是什么。我尝试过悬停，但没有成功。

TIA

【问题讨论】：

标签： javascript jquery html hover mouseover

【解决方案1】：

我建议使用.delegate()^help 将事件处理程序绑定到包装div.thumbnail-wrapper。从那里的<img> 节点捕获所有mouseenter 事件。使用.fadeTo()^help 和.siblings()^help 完成任务。

例子：

$('div.thumbnail-wrapper').delegate('a', 'mouseenter', function(e) {
    $(this).stop(1,0).fadeTo('fast', 1).siblings().stop(1,0).fadeTo('fast', 0.2);
});

演示：http://www.jsfiddle.net/qR2NU/2/
^{（我在示例中使用div 节点，您需要将@987654335 中的div 替换为img @参数）}

【讨论】：

@jAndy 抱歉，我编辑了 HTML，我该如何修改它，因为 img 是用包裹的，请参阅更新的 html.. 谢谢
嗨 jAndy.. 只是一个问题，在委托 fn 内部，'e.target' 等于 'this'？
@steweb：没必要！想象<img> 标签将被<span> 包裹，那么e.target 将代表span 和this <img>。所以一般来说使用$(this)会更好。
@Marvzz：只需将img 替换为a 作为目标节点即可。我更新了答案。
@jAndy，这正在演示中，但是当我在本地尝试时，我得到 .delegate is not a function？

【解决方案2】：

$('.thumbnail-wrapper img') //all images under the wrapper
  .bind('mouseenter',function (){//when mouseenter,blur me,focus my siblings
     $(this).animate({"opacity":"0.4"}).siblings().animate({"opacity":"1"});
}).bind('mouseleave',function (){// when mouse out, default state or (make me sober as i call it )
     $(this).animate({"opacity":"1"})
});

【讨论】：

嗨，我编辑了我的 html，我似乎无法让它与悬停一起工作？你能详细说明一下实现吗？
当鼠标进入时我想模糊其余部分，而不是选择的那个。
改变不透明度 0.4 到 1 和 1 到 0.4 应该没问题

【解决方案3】：

$('.thumbnail-wrapper img').hover(function(){
    $(this).siblings().animate({'opacity': 0.4});
}, function(){
    $(this).siblings().animate({'opacity': 1});
});

【讨论】：