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事件，从而产生所需的行为。

这是一个概念验证示例（使用红色背景表示mouseover个事件）：

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