3

我有以下 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);
  });
});

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

感谢，并有一个愉快的一天。

4

1 回答 1

0

我会做这样的事情：

$('.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清除动画队列。

你可以在这里看到我的工作示例：http: //jsfiddle.net/xKy49/2/

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

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

<li class="operation">Lorem ...
于 2012-05-10T08:28:09.027 回答