Siddharth Thevaril Siddharth Thevaril - 3 months ago 14
jQuery Question

jquery hover handlerOut to execute callback for specific cases

I have an HTML structure as this with a constraint that it cannot be modified

<ul>
<li></li>
<li></li>
<li></li>
</ul>

<div><a href="#"></a></div>
<div><a href="#"></a></div>
<div><a href="#"></a></div>


On hoverIn/ hoverOut on an
li
item, a corresponding
div
(with absolute positioning one behind another) will
fadeIn()/fadeOut()
which consists of some links.

Is it possible to modify the hoverOut handler in a way that it should execute a callback only if the hoverOut to hoverIn() is done from one
li
to another only?

In simple words the
hoverOut()
shouldn't execute the callback if the mouse pointer goes from
li
to any other HTML entity except for another
li
item

Answer

Since you want to fadeIn and fadeOut on hovering on li only. I have created the hover function as follows :

$('ul li').hover(
    function() {
        var indexes = $( "li" ).index(this);
        $("div:not(:nth-child("+indexes+"))").hide();
        $("div").eq(indexes).show();
    }
);

This will hide the div only on hovering li and will show when hovering on other elements.

Here is the jsFiddle

Hope it helps you :)