Lorem ...
Geek asks and answers

Untie, even if the mouse is over a child

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 would like to fadeIn the span element when the mouse moves over the list element and fadeOut when the mouse moves away from the element. BUT IF the mouse goes along the span itself, I would like to see it even after the mouse leaves. I accept a few attempts, but every time the space bar disappears when the mouse is no longer over. Below you can 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 this?

Thanks and have a good day.

+3
source share
1 answer

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;
});

fadeIn fadeOut , jQuery , ( ) , .

stop . true .

: http://jsfiddle.net/xKy49/2/

, - .

, ! operation :

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

More articles:


All Articles