0

This is a very novice question (I am mad I couldnt solve it). I have a problem due I an triggering an action everytime the mouse leaves a container, the problem now its I have children elements, and for some reason, when I move over a children element my action gets triggered.

I basically have something like this

<li>
<image>
<div>content</div>
</li>

I want when I enter to my li, its active and when i go out from it gets unactive, but i can enter and hover and all over my content, any idea how to do this?

I checked this but no results Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

Thanks

Community
  • 1
  • 1
jpganz18
  • 5,508
  • 17
  • 66
  • 115
  • you do not want any action on the children elements right? you want it to hover only on the parent? – Gokul Kav Jun 24 '13 at 22:35
  • The mouseleave event is not triggered on nested children -> http://jsfiddle.net/WNgAb/ – adeneo Jun 24 '13 at 22:35
  • hi, when i hover on the parent, i want to show the children, just making a .show over some divs of the content, nothing else, but i can make them with css adding a class at the parent if is not possible later with the javascript – jpganz18 Jun 24 '13 at 22:36
  • heres a jsfiddle updated on adeneo's answer http://jsfiddle.net/dxeEV/ – Gokul Kav Jun 24 '13 at 22:44

2 Answers2

2

I personally take the lazy way out and use jQuery's hover method to set them both at once rather than use mousein and mouseout separately. This lets jQuery deal with children in and out, something like:

jQuery("li").hover(function() {
  //mousein actions
 },
 function() {
  //mouseout actions
 }
);
Joe
  • 25,000
  • 3
  • 22
  • 44
1

To prevent stuff from happening when hovering the children, just check that the target is in fact the bound element :

$('li').on('mouseenter mouseleave', function(e) {
    if ( e.target === this ) {
        // do stuff here
    }
});
adeneo
  • 312,895
  • 29
  • 395
  • 388