Question

当我从.box（目标号1）悬停时，我希望迷你缩略图仍然显示但如果用户将鼠标悬停在点击区域（目标号2），我不想触发悬停事件。我将悬停事件绑定到父级，即.box，它实现了目标1，但坚持达到目标2。

如果用户首先将鼠标悬停在点击区域上，如何不触发悬停事件？

    	$(document).ready(function() {
    	  $('.box').not('.box .box-lower').hover(function() {
    	    $(this).find('.productsThumbWrap').stop(true, true).animate({
    	      "margin-top": "+=108px"
    	    }, "normal");
    	    $(this).find('.productsThumbWrap img').stop(true, true).css({
    	      opacity: 1,
    	      'transition': 'opacity 0.3s ease 0.35s'
    	    });
    	  }, function() {
    	    $(this).find('.productsThumbWrap').stop(true, true).css({
    	      'margin-top': '92px'
    	    });
    	    $(this).find('.productsThumbWrap img').stop(true, true).css({
    	      opacity: 0,
    	      'transition': 'none'
    	    });
    	  });
    	});

.box {
  width: 100%;
  height: auto;
  min-height: 290px;
  margin-bottom: 30px;
  border: 5px solid #000
}
.orange {
  background: orange
}
.box-lower {
  background: red;
  height: 80px;
}
.box-upper {
  position: absolute;
}
.productsThumbWrap {
  text-align: center;
  margin-top: 92px;
}
.productsThumbWrap img {
  padding: 14px 6px;
  display: inline;
  opacity: 0;
}
.click {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-lg-6">
  <div class="box">
    <div class="box-upper">
      <img src="http://placehold.it/398x200" />
    </div>
    <div class="productsThumbWrap">
      <img src="http://placehold.it/80x80" />
      <img src="http://placehold.it/80x80" />
      <img src="http://placehold.it/80x80" />
      <img src="http://placehold.it/80x80" />
    </div>
    <div class="box-lower">
      <button class="click">Click</button>
    </div>
  </div>
</div>

Answer 1

如果我想让我轻松一点，我会在“悬停以扩展”位周围添加一个包装（查看演示：http://jsfiddle.net/ncbrr6py/）

<div class="hoverExpand">
</div>

围绕“悬停扩展”部分，为您提供：

<div class="hoverExpand">
    <div class="box-upper">
        <img src="http://placehold.it/398x200" />
    </div>
    <div class="productsThumbWrap">
        <img src="http://placehold.it/80x80" />
        <img src="http://placehold.it/80x80" />
        <img src="http://placehold.it/80x80" />
        <img src="http://placehold.it/80x80" />
    </div>
</div>

然后您可以将您的javascript更改为：

$(document).ready(function () {
    $('.hoverExpand').mouseenter(function () {
        $(this).find('.productsThumbWrap').stop(true, true).animate({
            "margin-top": "+=108px"
        }, "normal");
        $(this).find('.productsThumbWrap img').stop(true, true).css({
            opacity: 1,
            'transition': 'opacity 0.3s ease 0.35s'
        });
    });
    $('.box').mouseleave(function () {
        $(this).find('.productsThumbWrap').stop(true, true).css({
            'margin-top': '92px'
        });
        $(this).find('.productsThumbWrap img').stop(true, true).css({
            opacity: 0,
            'transition': 'none'
        });
    });
});

请注意，它现在用户鼠标输入和鼠标提取，这可能不是你想要的，但据我所知，你的工作方式相同（例如：即使你按照方式进入浏览器，也会触发光标“在扩展区域中”“结束”

我还添加了一些css：

.hoverExpand{
    overflow:hidden;
}

这将解决一些奇怪显示框的问题（这就是为什么你有整个控件的边框？）。

如果你希望扩展器在用户悬停按钮时缩小，那么你也应该将鼠标左键绑定到.hoverExpander，但这会使点击该按钮变得相当尴尬，因为它将从光标“逃跑”虽然它缩小了。

还有另一种选择，如果您将事件作为参数传递给事件处理程序，您可以执行event.stopPropagation（）来阻止事件冒泡/传播DOM树，并且您可以将事件绑定到应该停止的任何事件冒泡：

$('.box-lower').hover(function(event){
    event.stopPropagation();
});

如果您运行旧代码，但是当您悬停边框时或者只是在您有一些填充的按钮下方时它仍将触发扩展...（这就是为什么添加容器会使它变得更加容易。。）

从父母的触发器中排除悬停＆＃39;儿童

1 个答案: