CODEWITHSUNDEEP
jquery
Joe.wang
Joe.wang

Reputation: 11793

Stop mouseout events when mouse move in specified element

All , I knew mouseover and mouseout events, these events are trigger when the mouse moves in and out of elements AND it's descendants. Let me take a example ,Say you have a dom structure like below:

<div id="top">
   <div class="container">
      <!--<div class="head">
      </div>-->
      <div class="content">
         <!--maybe there are many nested `div.contiainer` as children directly or not directly.-->
      <div>
   </div>
</div>

Supposed the mouse move in the div.container we append a div.head in there. and when mouse out we remove the div.head which was created when mouse in.

so the code will looks like below .

    $("div.container").on("mouseover",function(){//append div.head})
.on("mouseout",function(){//remove the div.head});

So my question is I want to whether there is possiblility to stop the event mouseout when mouse move in div.head ?

Upvotes: 0

Views: 1162

Answers (1)

jarmie
jarmie

Reputation: 383

.mouseout will fire when you leave the element its bound to - even if it is a child element. You are better off using .mouseleave which will only fire when you leave the element (not hover over a child) http://api.jquery.com/mouseleave/

Fiddle: http://jsfiddle.net/zN4FF/

Upvotes: 2

Related Questions