CODEWITHSUNDEEP
jquery
Jako
Jako

Reputation: 4901

jQuery hover over item and keep active

I'm not really sure how to word this best, but basically I would like to hover over a list item which fades in another element right above it. When you hover back off the list item the elements should fadeout, but if you over hover the newly visible element, I would like it to remain visible.

I've put together a simple demonstration, http://jsfiddle.net/CLDyc/ - Basically, when you hover over item 1 and then move your mouse to "Item 1 Extra Info" I would like it also to stay visible.

var location;

$("#dots li").hover(

    function () {
        location = $(this).attr("class");
        $("#extra-info ."+location).fadeIn("fast");
      },
    function () {
        $("#extra-info ."+location).stop(true, false).fadeOut("fast");
      }
);

Upvotes: 1

Views: 560

Answers (2)

Lowkase
Lowkase

Reputation: 5699

Here is one way to achieve it, similar to Syon's suggestion.

http://jsfiddle.net/CLDyc/2/

HTML

<ul id="dots">
    <li class="item1">Item 1<div style="display:none;">Item 1 Extra Info</div></li>
</ul>

CSS

.item1 div {
    margin: 0;
    padding: 0;
    position:absolute;
    top:8px;
    left:70px;
    width: 100px;
    height: 50px;
    border: 1px solid red;    
}

ul#dots {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#dots li {
    width: 60px;
    height: 30px;
    border: 1px solid green;
}

JS

$("#dots li").mouseover(function() {
    $(this).find('div').stop(true, false).fadeIn("fast");
}).mouseout(function(){
    $(this).find('div').stop(true, false).fadeOut("fast");
});

$(".item1 div").mouseover(function() {
    $(this).stop(true, false).show();
}).mouseout(function(){
    $(this).stop(true, false).fadeOut("fast");
});

Upvotes: 0

Ram
Ram

Reputation: 144689

As there is a gap between the elements, mouseleave event is triggered and your element will be hidden, one option is using setTimeout function.

var location, timeout = 0;

$("#dots li").hover(function () {
    location = $(this).attr("class");
    $("#extra-info ." + location).fadeIn("fast");
}, function () {
    timeout = setTimeout(function () {
        $("#extra-info ." + location).stop(true, false).fadeOut("fast");
    }, 500);
});

$('#extra-info li').mouseenter(function(){
   clearTimeout(timeout);   
}).mouseleave(function(){
   $(this).fadeOut('fast');
});

http://jsfiddle.net/SB4pH/

Upvotes: 2

Related Questions