javascript - 隐藏时如何防止div触发其父级的mousemove

我有一些媒体。除此之外，我还有一组要在用户鼠标空闲时隐藏的控件。然后，如果用户移动鼠标，我希望它们重新出现。

我的问题是，当控件消失时，它们会在父控件上触发mousemove事件。这将导致控件重新出现。

这是JS代码：

(function($) {
  var timer = null;
  $('.outer').mousemove(function() {
    $('.inner').fadeIn('slow');

    if (timer) {
      window.clearInterval(timer);
    }
    timer = window.setTimeout(function() {
      $('.inner').fadeOut('slow');
    }, 3000);
  });
})(jQuery);

这是一个小提琴：https://jsfiddle.net/8oduhs96/

现在，小提琴的结构看起来更像我的项目。我在更改标记方面没有太多灵活性，因此首选JS和/或CSS解决方案。

您可以取消注释CSS的下部块，以查看仅在鼠标位于蓝色区域上时才会发生此问题。

最佳答案

使用CSS和不透明度/可见性隐藏您的元素，它们不会触发DOM的修改（作为jQuery display:none/block;的fadeIn/fadeOut效果）

https://jsfiddle.net/8oduhs96/8/

关于javascript - 隐藏时如何防止div触发其父级的mousemove，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42031880/