时间戳

首页 > 解决方案 > 鼠标离开不触发（嵌套）

javascript - 鼠标离开不触发（嵌套）

问题描述

为什么鼠标离开不射击。

$('.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();
    }
  });

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

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

但我想用第一把小提琴的代码来实现它。但我做错了什么。

标签： javascriptjquerymouseevent

解决方案

我让它工作了，这是更新的代码：

$('.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();
      }
    });

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

在这里查看小提琴的结果：https ://jsfiddle.net/czqab09j/4/

推荐阅读