Question

当我将鼠标悬停在来自不同ul的某些标签上时，我尝试更新ul li。对于前2个选项卡，每件事都可以正常工作，但是当我尝试移动到第3个选项卡时，即使我正确对它（颜色发生变化），它也不会更新

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() );

});

Answer 1

使用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/

Answer 2

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

我已经编辑了您的代码并使用了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/。

悬停上的元素不会更新

2 个答案: