Question

You can see an example here:
http://jsfiddle.net/TuH95/5/

When you hover over the li element the event is fired. While still in the li element if you hover over span it will fire again, anyway i can make it fire only once when hovering over span?

Answer 1

Use mouseenter event that will solve the issue.

var i = 0;
$('.container').on('mouseenter', function(){
    i++;
    $('.result').html(i);
})

Demo