jquery hover handlerOut to execute callback for specific cases

Question

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

Arun AK · Accepted Answer · 2016-08-14 08:25:04Z

1

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 :)

answered Aug 14, 2016 at 8:25

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery hover handlerOut to execute callback for specific cases

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related