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>

Thomas Jones · Accepted Answer · 2012-04-28 15:45:14Z

17

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/

edited Apr 28, 2012 at 15:45

answered Apr 28, 2012 at 14:48

Thomas Jones

4,94730 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Miguel Over a year ago

Thank you for your quick response. I've added the suggested code but doesn't work! :( "hovering" in .mensal div still hovers the parent div.

Thomas Jones Over a year ago

are you using jQuery? try returning false from the method. Also, just noticed a typo, fixing the answer now. The hover is a function call, so it needs to be closed :)

Thomas Jones Over a year ago

ive added a javascript implementation with some modified css that should help

j08691 Over a year ago

Don't you mean stopPropagation instead of preventDefault?

Thomas Jones Over a year ago

@j08691 yes. Thats correct. To stop bubbling, you want api.jquery.com/event.stopPropagation not api.jquery.com/event.preventDefault good catch.

Collectives™ on Stack Overflow

Preventing Hover event of a Div triggering on parent Div?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related