Question

我有以下HTML

<ul>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>

当鼠标移过列表项时，我想淡出span元素，当鼠标离开项目时，我想淡出。但是，如果鼠标越过跨度本身，即使鼠标移开，我也希望它保持可见状态。我尝试了几次尝试，但每当鼠标不再结束时跨度就会消失。您可以在下面找到最近2次尝试

$(".operation").on("mouseenter", function(event){
$(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").off("mouseleave", function(event){
    $(this).fadeOut(200);
});

和

$(".operation").on("mouseenter", function(event){
 $(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").hover(function(){
  $(this).off("mouseleave", function(event){
    $(this).fadeOut(200);
  });
});

我错过了什么吗？我该如何解决？

谢谢你，祝你有个愉快的一天。

Answer 1

我会做这样的事情：

$('.operation').hover(function () {
    var i = $(this).index();
    $('span').eq(i).stop(true).animate({'opacity' : 1}, 200);
}, function () {
    $('span').animate({'opacity' : 0}, 200);    
});

$('span').hover(function () {
    $(this).animate({'opacity' : 1}, 200);
}, function () {
    return false;
});

我倾向于不使用fadeIn和fadeOut方法来悬停事件，因为jQuery有一个有趣的小bug，如果用户将光标移到上面，它会逐渐（并且不可逆）地减少元素的不透明度它快速连续几次。

您可以添加stop方法来结束当前的动画。传递true参数会清除动画队列。

您可以在此处查看我的工作示例：http://jsfiddle.net/xKy49/2/

如果在悬停时它们的行为不同，则跨度不能是列表项的子元素。

另外，不要忘记关闭你的课程声明！ operation之后应该有双引号：

<li class="operation">Lorem ...

即使鼠标在孩子身上也解开绑定

1 个答案: