Question

I have the following HTML

<ul>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>
<li class="operation>Lorem ... <span rel="popover" data-content="Impsum">%</span></li>

I’d like to fadeIn the span element when the mouse goes over the list item and fadeOut when the mouse moves away from the item. BUT IF the mouse goes over the span itself I’d like to keep it visible even after the mouse moves away. I mede several attempts but every time the span disappears when the mouse is not over anymore. Below you may find the last 2 attempts

$(".operation").on("mouseenter", function(event){
$(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").off("mouseleave", function(event){
    $(this).fadeOut(200);
});

and

$(".operation").on("mouseenter", function(event){
 $(this).children("span[rel=popover]").fadeIn(200);
}).on("mouseleave", function(event){
  $(this).children("span[rel=popover]").fadeOut(200);
});

$("span[rel=popover]").hover(function(){
  $(this).off("mouseleave", function(event){
    $(this).fadeOut(200);
  });
});

Am I missing something? How can I fix it ?

Thanks and have a nice day.

Answer 1

I would do something like this:

$('.operation').hover(function () {
    var i = $(this).index();
    $('span').eq(i).stop(true).animate({'opacity' : 1}, 200);
}, function () {
    $('span').animate({'opacity' : 0}, 200);    
});

$('span').hover(function () {
    $(this).animate({'opacity' : 1}, 200);
}, function () {
    return false;
});

I tend not to use the fadeIn and fadeOut methods for hover events because jQuery has a funny little bug that gradually (and irreversibly) diminishes the opacity of an element if the user moves the cursor over it several times in rapid succession.

You can include a stop method to end any current animations. Passing an argument of true clears the animation queue.

You can see my working example here: http://jsfiddle.net/xKy49/2/

The spans can’t be child elements of the list items if they’re to behave differently on hover.

Also, don’t forget to close your class declarations! There should be a double quote after
operation:

<li class="operation">Lorem ...