悬停时的元素不会更新

当我将鼠标悬停在来自不同ul的某些选项卡上时，我尝试更新ul li。每一件事情好工作的第2个选项卡，但是当我尝试移动到第三个标签第一李它不会得到更新，即使我的权利我就可以了（颜色变化）悬停时的元素不会更新

https://jsbin.com/zaqutayuku/edit?html,output

$(".tabs").hover(function(){ 



    $('.nav > .tabs > .subnav').each(function(key,val){ 

     $(this).removeClass('show'); 

    }); 


    $(this).children('.subnav').addClass('show'); 

    $("#at > #one").text($(this).children('p').text()); 
    $("#at > #two").text(""); 

}); 


$(".subtab").hover(function(){ 

    $("#at > #two").text($(this).text()); 

});

来源

2015-07-19 Xtal

开发者控制台中的任何错误？问题是关于展示新的内容或颜色变化？据我看到你的代码，它的工作“罚款” – lockedz

不，开发控制台没有错误。问题是更新下面的时候，当我在测试3 – Xtal

有两个问题：首先，jquery hover()函数对鼠标输入和鼠标离开事件作出反应。因此，每当用户悬停选项卡或子选项卡时，您的事件就会翻倍。此外，当孩子subtab被徘徊时，因为孩子是父容器的一部分，所以还执行tab悬停事件。

我编辑了您的代码并使用了jQuery的mouseover()函数。选项卡事件现在位于具有选项卡标题的p元素上。首先悬停子标签的情况也包含在JS部分中。

var menu; 
var submenu; 

$(".tabs p").mouseover(function(){ 
    $('.nav > .tabs > .subnav').each(function(key,val){ 
    $(this).removeClass('show');  
    }); 
    var parentTabs = $(this).parent('.tabs'); 

    parentTabs.children('.subnav').addClass('show'); 
    $("#at > #one").text($(this).text()); 
    $("#at > #two").text(''); 

}); 

$(".subtab").mouseover(function() { 
    $("#at > #one").text($(this).closest('.tabs').children('p').text()); 
    $("#at > #two").text($(this).text()); 
});

这里是小提琴：https://jsfiddle.net/8L92a9ua/。

来源

2015-07-19 17:17:33

使用mouseenter事件和delegated events：

$(".tabs").mouseenter(function(){ 
    $('.nav > .tabs > .subnav').each(function(key,val){ 
     $(this).removeClass('show'); 
    }); 

    $(this).children('.subnav').addClass('show'); 

    $("#at > #one").text($(this).children('p').text()); 
    $("#at > #two").text(""); 
}); 

$(".nav").on('mouseenter', '.subtab', function(){ 
    $("#at > #two").text($(this).text()); 
});

https://jsfiddle.net/fh9czspu/2/

来源

2015-07-19 17:01:25 monkey

悬停时的元素不会更新

回答

相关问题