Question

I am trying to target the <li>s from a <ul> and give them a hover event.

Unfortunately the <li>s contain some other <div>s that are positioned outside the <li> itself.

The problem occurs that the .hover() event fires when I hover on the child <div>s since DOMwise they are children, even though design/geometry-wise the seem like a diffent element totally.

Is there any way, or any other event that I can use for when the cursor runs over the <li> itself and NONE of it’s sub-elements?

Thanks in advance.

Answer 1

Is this for a style change?
If so try using CSS pseudo events instead of jQuery, e.g.:

li:hover
{
  background-color:yellow;
}

Alternatively, use e.stopPropagation(), e.g.:

$(document).ready(function(){
    $(".parent").click(function(){
        // do whatever;
    });
    $(".child").click(function(e) {
         e.stopPropagation();
    });
});

Unfortunately I don’t think this works with hover, but it does with mouseover and mouseout, which is what hover basically uses.