javascript - jQuery - 停止子级悬停触发父级单击相关元素

Question

这不是一个重复的问题。我浏览了 stackoverflow，以下问题都对我不起作用。

jQuery stop child elements animate on hover of parent
How to have click event ONLY fire on parent DIV, not children?

我有一个父元素 .cover 和一个名为 .details-wrapper 的子元素

当我将鼠标悬停在父级的子元素上时，将触发父级悬停。这就是我想要的样子(抱歉编辑)；

目前我尝试过(并且失败)的是使用 return false; 和 stopPropagation

该图像具有 position:relative 和 top: 160px，因此它来自原始的 .cover 包装器

这真的很奇怪，因为我将鼠标悬停在元素上的方式决定了 jquery 的工作方式。这是一个 gif 显示这一点。

https://gyazo.com/7153f3b8d3a57d0cfbb6b8d7d56caf0a

我使用的 jQuery 是:

$(".cover").not('.details-wrapper').hover(function(e) {
    if (e.target === this) {
        $(".cover").css("background","url(url1), url('"+cover._url+"')");
    }
}, function() {
    $(".cover").css("background","url('"+cover._url+"')");
});

我不确定如何解决这个问题，因此当我将鼠标悬停在子元素上时，它会停止触发父元素的悬停。

为了进一步说明，这也不起作用:

$(".cover").hover(function(e) {
    if (e.target === this) {
        $(".cover").css("background","url(url1), url('"+cover._url+"')");
    }
}, function() {
    $(".cover").css("background","url('"+cover._url+"')");
});

$(".cover .details-wrapper").hover(function(e) {
    e.stopPropagation();
});

Answer 1

不要依赖 .hover() 函数，它是 .mouseenter() 和 .mouseleave() 的简写> 事件。您需要 .mouseover() 和 .mouseout() 事件，它会在进入/离开子节点时适当触发:

$(function() {
  $('.cover').on('mouseover', function(e) {
      if (e.target === this) {
        $('.cover').css('background','url(url1), url(''+cover._url+'')');
      }
    })
    .on('mouseout', function() {
       $('.cover').css('background','url(''+cover._url+'')');
    });
});

简单的解释是这样的:当您使用 .hover() (因此 mouseenter 和 mouseleave 被监听)时，它们当您进入或离开子元素时不会触发。这导致该事件看起来是“传播”是因为在后台，当您进入子级时，从未调用 mouseleave 事件。但是，mouseout 事件将被调用，从而产生所需的行为。

这是一个概念验证示例(使用红色背景来指示鼠标悬停事件):

$(function() {
  $('.cover').on('mouseover', function(e) {
      if (e.target === this) {
        $('.cover').css('background', 'red');
      }
    })
    .on('mouseout', function() {
      $('.cover').css('background', 'transparent');
    });
});

* {
  padding: 0;
  margin: 0;
}
.cover {
  padding: 2rem;
  text-align: center;
  position: relative;
  height: 10rem;
}
.cover .details-wrapper {
  background-color: #eee;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 2rem;
  transform: translate(-50%,-50%);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cover">
  Cover
  <div class="details-wrapper">
    Details wrapper
  </div>
</div>

SO 上有一个线程讨论这些事件之间的区别:Jquery mouseenter() vs mouseover()