问题描述
当我将鼠标悬停在其他ul的某些选项卡上时，我尝试更新ul li。 对于前两个选项卡，一切正常，但是当我尝试移动至第三个选项卡时，即使我正确，它也不会更新（颜色更改）
$(".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() );
});
1楼
使用mouseenter事件和 ：
$(".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() );
});
2楼
有两个问题：首先，jquery hover()函数对鼠标进入和鼠标离开事件作出反应。
因此，每当用户悬停一个选项卡或一个子选项卡时，您的事件就会加倍。
此外，当子subtab tab悬停时，也将执行tab悬停事件，因为子项是父容器的一部分。
我已经编辑了您的代码，并使用了jQuery的mouseover()函数。
tab事件现在位于带有tabs标题的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());
});
这是小提琴： : 。