CODEWITHSUNDEEP
javascriptjquery
marioosh
marioosh

Reputation: 28556

Lost mouseover when mouse is over inner element

I have example like below. How to avoid "lost of mouseover" on <div> when mouse is over inner <span> ?

<div id="box">
  ABC
  <span style="font-size: 10px; font-weight: normal;">abc</span>
</div>

Live demo here.

Upvotes: 1

Views: 2402

Answers (2)

Alex K.
Alex K.

Reputation: 175776

Switch to mouseenter & mouseleave; http://jsfiddle.net/alexk/PjhmC/3/

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered

Upvotes: 4

Chris
Chris

Reputation: 3201

use jquery hover instead of mouseenter/mouseout e.g.

$('#box').hover(function(){
   //Enter code
},
function(){
   //Exit code
});

As another user mentions, you could use a chained event of mousenter and mouse leave e.g.

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

However, hover is simply shorthand for the above.

Upvotes: 2

Related Questions