Preventing Hover Div Launch Event for Parent Div?

Question

When I .mensal over the .mensal DIV, it starts the mouseover of the parent .opera DIV, which seems wrong to me. I just want the backlight effect to work on the child element of the .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 also hangs over a parent. There are no "blocking" in html events.

There are two chains of methods, bubble and capture.

Any event that occurs in the W3C event model is first recorded until it reaches the target element and then bubbles again.

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

The only way to stop this is to prevent bubbling by adding javascript to your page to prevent the chaining. It is easy in jQuery

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

It seems to me that this answer is completely useless when working with CSS. Javascript events do not concern CSS selectors or their prevention.

Unfortunately, only with CSS I don’t know how to do this (and even in javascript it can get complicated). CSS 4 selectors allow you to specify a selector theme http://dev.w3.org/csswg/selectors4/#subject so you can do something like

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

but it is not yet implemented and is still under development for the project.

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 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 a mandatory working demo: http://jsfiddle.net/WB6Ty/