鼠标离开不触发（嵌套）

Question

为什么鼠标离开不触发。

$('.tlcr').hide();

$('.tli')
  .on({
    mouseenter: function() {
      $('.tlcr').hide();
      const index = $(this).index('.tli');
      $('.tlcr').eq(index).show();
    },
    mouseleave: function() {
      $('.tlcr').eq(index)
        .on({
          mouseenter: function() {
            $('.tlcr').eq(index).show();
          }, mouseleave: function() {
                $('.tlcr').hide();    
          }
        });
      $('.tlcr').hide();
    }
  });

上面的代码变成了fiddle：https://jsfiddle.net/czqab09j/3/

我想实现这个：https://jsfiddle.net/aLquks1c/1/

但我想用第一个 fiddle 中的代码来实现它。但是我做错了。

Answer 1

我成功了，这是更新后的代码：

$('.tli')
  .on({
    mouseenter: function() {
      $('.tlcr').hide();
      const index = $(this).index('.tli');
      $('.tlcr').eq(index).show();
    },
    mouseleave: function() {
      $('.tlcr').eq(index)
        .on({
          mouseenter: function() {
            $('.tlcr').eq(index).show();
          }
        });
    }
  });
  $('.tlcr')
    .on({
      mouseleave: function() {
        $('.tlcr').hide();
      }
    });

我基本上删除了嵌套的鼠标离开功能并使其独立。

在此处查看 fiddle 中的结果：https://jsfiddle.net/czqab09j/4/

鼠标离开不触发（嵌套）

Mouse leave not firing (nested)

javascript

jquery

mouseevent