Javascript 即使鼠标悬停在孩子身上也要解开束缚

我有下面的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>

及

我错过什么了吗？我怎样才能修好它

---

谢谢你，祝你今天愉快。

我会这样做：

$('.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有一个有趣的小错误，如果用户连续快速地将光标移到元素上几次，它会逐渐（不可逆地）减少元素的不透明度

您可以使用

stop

方法来结束任何当前动画。传递参数

true

将清除动画队列

您可以在这里看到我的工作示例：

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

另外，不要忘记关闭类声明！

操作

：

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

Lorem。。。

谢谢您的回复。我尝试了你的解决方案，但当鼠标离开时，跨度似乎会消失。也许我没有很好地解释我试图实现的目标。让我们试着重新措辞。当鼠标移动到我要跨越的列表项上时，会淡入淡出状态。当鼠标移离我想要的项目时，跨距消失。当鼠标移动到跨度上时，无论鼠标稍后移动到何处，我希望跨度保持可见。同时，您也知道，您没有关闭每个列表项中的类声明。我用一个有用的JSFIDLE更新了我的答案。好吧，我又读了一遍这个问题，我想我知道你想要什么。谢谢你的回复，我很感激。不幸的是，跨度必须是列表项的子元素，所以我必须想出一个不同的想法。

$('.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;
});

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