Preventing Hover event of a Div triggering on parent Div?

Question

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>

Answer 1

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.

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

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

});

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

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.

EDIT: 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;
}​

and the obligitory working demo: http://jsfiddle.net/WB6Ty/