使用jQuery动画时丢失hover（不移动鼠标）

我有这一行缩略图，我用jQuery动画。
这些缩略图中的每一个都有一个hover和活动类。

它们工作正常但是当我为列表设置动画时，鼠标光标下的新缩略图不会应用hover？ 每次点击后我都要移动鼠标一点点？

这有点难以说明..我在这里做了一个小提琴： http ： //jsfiddle.net/nZGYA/
当您在不移动鼠标的情况下开始点击拇指3后，您会看到我的意思…

它在FireFox中运行良好，而不是Safari，Chrome，IE等。
我可以做些什么吗？

这里参考我的代码：

 .container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver; } ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; } li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; } #list-2 li a { display: block; width: 120px; height: 80px; outline: none; } #list-2 li a:hover { background: teal; } #list-2 li a.active { background: navy; }  $(document).ready(function() { var idx_2 = 0; $('#list-2 li a') .click(function() { $('#list-2 > li a').removeClass('active'); $(this).addClass('active'); var id = $('#list-2 li a.active').data('index') - 2; idy = Math.max(0, id * 90); $(this).parent().parent().animate({ 'top' : -idy + 'px' }); return false; }) .each(function() { $(this).data('index', idx_2); ++idx_2; }); }); 
 
 
 
 
 
 
 
 
 
  

Answer 1

我只是在顶级名单上工作，但我认为我已经完成了所有工作。 如果您正在寻找，请告诉我。

这是小提琴手

 var idx = 0; $('#list-1 li').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click (function() { var currentindex = $('.active').index(); var selectedindex = $(this).index(); var nexthoverindex = selectedindex + (selectedindex - currentindex); //counter for starting on index 1 if(currentindex === 1 && selectedindex > 2){ nexthoverindex = nexthoverindex - 1; } //counter for starting on index 0 if(currentindex === 0 && selectedindex > 2){ nexthoverindex = nexthoverindex - 2; } //make sure the selection never goes below 0 if(nexthoverindex < 0){ nexthoverindex = 0; } $('#list-1 > li').removeClass('active'); $(this).addClass('active'); var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle idy = Math.max(0, id * 90); $(this).parent().animate({ 'top': -idy + 'px' },200, function(){ $('.hover').removeClass('hover'); if(currentindex > 2 || selectedindex > 2){ $('#list-1 > li').eq(nexthoverindex).addClass('hover'); } }); return false; }).css('cursor', 'pointer').each(function() { $(this).data('index', idx); ++idx; }); 

Answer 2

我有一个适用于Chrome和IE的解决方案（尚未在Safari中测试）。 基本上，如果缩略图已移动，我会在animate（）回调事件中触发鼠标下的元素的mouseover（）事件。 该解决方案仅针对list-1实施。

 // list 1 var idx = 0; $('#list-1 li').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() { $('#list-1 > li').removeClass('active'); var $active = $(this); $active.addClass('active'); var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle var moveAmount = 90; idy = Math.max(0, id * moveAmount); var oldPos = $active.parent().position().top; $active.parent().animate({ 'top': -idy + 'px' }, function(){ var newPos = $(this).position().top; // Check if we moved if(oldPos - newPos != 0) { var movement = (oldPos - newPos) / moveAmount; $($(this).children()[$active.index() + movement]) .trigger("mouseover"); } }); return false; }).css('cursor', 'pointer').each(function() { $(this).data('index', idx); ++idx; }); 

如果你不想在那里测试它，这里是我在jsfiddle中的fork的链接 – http://jsfiddle.net/jimmysv/3tzAt/15/

Answer 3

Hover将mouseEnter（）和mouseLeave（）绑定到对象。 我认为在这种情况下你会有更好的运气与mouseOver（），虽然我没有尝试过。

mouseover和mouseenter事件有什么区别？