防止在父 Div 上触发 Div 的悬停事件?

2022-01-22 00:00:00 hover html css

当我将鼠标悬停在 .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*/ }

但这还没有实现，并且仍在为草案制定.

but this isnt implemented yet, and is still under development for the draft.

这是一个适合您的 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');
    });

})​

以及修改后的 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/

相关文章