防止在父Div上触发Div的悬停事件？ [英] Preventing Hover event of a Div triggering on parent Div?

问题描述

当我mouseover .mensal DIV它会触发鼠标移动父 .opera DIV，我。我只想让突出显示效果来对孩子 .opera DIV。

When I mouseover .mensal DIV it will trigger the mouseover the parent .opera DIV, which seems wrong to me. I just want the "highlight" effect to to work on the child .opera DIV.

#operaContent {
  padding: 0 50px 0 50px;
  position: relative;
  overflow: visible;
}
#operaContent .opera {
  display: block;
  border: 1px solid #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  padding: 5px;
  margin-bottom: 10px;
  height: 120px;
  background-color: #0A8ECC;
}
#operaContent .opera:hover {
  border: 1px solid #AAAAAA;
  background-color: #DDDDDD;
  cursor: pointer;
}
.mensal {
  position: absolute;
  top: 1px;
  left: 8px;
  z-index: 3;
  display: block;
}

<div id="operaContent">
  <div class="opera">
    <div class="mensal">
      DIV
    </div>
  </div>
</div>

推荐答案

根据定义，将鼠标悬停在某个子项上，将鼠标悬停在父项上。在html事件中没有阻塞。

By definition, hovering over a child, hovers over the parent as well. There is no "blocking" in html events.

有两个方法链，气泡和捕获。

There are two method chains, the bubble and the capture.

W3C事件模型中发生的任何事件首先被捕获，直到
到达目标元素，然后再次冒泡。

Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.

http：// www .quirksmode.org / js / events_order.html

您要阻止这种情况的唯一方法是通过向您的网页添加javascript来防止冒泡以防止链条。这在jQuery中很简单

The only way you're going to stop this is to prevent the bubbling by adding javascript to your page to prevent the chain. This is simple in jQuery

$('.mensal').hover(function(e){
    e.stopPropagation();

});

我认为这个答案在处理CSS时完全没有帮助。 JavaScript事件不处理CSS选择器或阻止它们。

It occurs to me that this answer is completely unhelpful when dealing with CSS. Javascript events dont deal with CSS selectors or preventing them.

不幸的是，单独使用CSS，我不知道一个方法来完成这个（甚至在JavaScript中它可以得到棘手）。 CSS 4选择器将允许您指定选择器的主题 http://dev.w3.org/csswg/selectors4/ #subject ，以便您可以执行

Unfortunately, with CSS alone, I do not know of a way to accomplish this (and even in javascript it can get tricky). CSS 4 selectors will allow you to specify the subject of the selector http://dev.w3.org/csswg/selectors4/#subject so that you can do something like

 #operaContent .opera:hover! .mensal:not(:hover) { /*your css*/ }

编辑：
这里是一个javascript（jQuery）实现，应该为你工作

Here is a javascript (jQuery) implementation that should work for you

$(function(){
    $('.opera').hover(function() {$(this).addClass('hoverIntent')}, 
                      function(){ $(this).removeClass('hoverIntent'); }
                     );

    $('.opera .mensal').hover(function() {
        $(this).parent('.opera').removeClass('hoverIntent');
    });

})​

>

and the modified CSS

#operaContent {
    padding: 0 50px 0 50px;
    position: relative;
    overflow: visible;
}

#operaContent .opera {
    display: block;
    border: 1px solid #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    padding: 5px;
    margin-bottom: 10px;
    height: 120px;
    background-color: #0A8ECC;
}


#operaContent .opera.hoverIntent {
    border: 1px solid #AAAAAA;
    background-color: #DDDDDD;
    cursor: pointer;
}

.mensal {
    position: absolute;
    top: 1px;
    left: 8px;
    z-index: 3;
    display: block;
}​

和义务工作示范：http://jsfiddle.net/WB6Ty/

这篇关于防止在父Div上触发Div的悬停事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！