Keep hover state applied until user mouses over another element

问题

First let me state that I'm a jquery noob, so this may not make a lot of sense.

So I have a series of list items that expand to show a hidden div inside if the user mouses over a link inside the item (not the whole list item itself)

The problem is that if the users mouse leaves the link the li closes up again.

I need this to work in a way so that the li only closes if you mouse over a link in another li. (sorry this is kind of hard to put into words)

Heres my code.

$(document).ready(function(){
                $(".home_upcoming_title").hoverIntent({
                over: makeTall, 
                timeout: 500, 
                out: makeShort

        });
    }); // close document.ready

    function makeTall(){$(this).parents("li").animate({"height":200},200);}
    function makeShort(){$(this).parents("li").animate({"height":32},200);}

and the HTML

    <li class="p1">

            <ul class="home_upcoming_list2" id="fade">
            <li class="home_upcoming_date">Sat.Sept.23rd.2010</li>
            <li><a href="./." class="home_upcoming_title" >Event Title</a></li>
            <li class="home_upcoming_city">Los Angeles</li>
            <li class="home_upcoming_type">Festival</li>
            <li class="home_upcoming_venue">Venue</li>
            <li class="home_upcoming_age">18+</li>
            <li><a href="./." title="Buy Tickets" class="home_upcoming_tix">Buy Tickets</a></li>
            <li><a href="./." class="upcoming_info" title="View Details"></a></li>
            </ul>

        <div style="height:150px; background-color:#FF0000; display:block;" class="sl0w"></div>
        </li>

so the link with the class "home_upcoming_title" expands li to show the div inside but when I mouse over the div itself the list closes. I also need it so only the class "home_upcoming_title" expands the div. but it needs to stay open until you mouse over another link with the same class.

sorry if that doesn't make much sense :)

回答1:

Have a function closeTips which calls makeShort on all the tooltips, then use .mouseover() instead of .hoverIntent() to run closeTips and then call makeTall.

回答2:

I see you are using hoverIntent plugin, and AFAIK the plugin does not have what you intent to do, maybe you will need to change the plugin base code to accomplish what you want. Or try to use the native events mouseover mouseout to do what you want but it ll require more coding from you side.

回答3:

I would recommend trying the jQuery UI Accordion. There is an option to trigger it on a mouse over event. See 'open on mouseover' on the right hand side of the link.

Does that answer your question?

来源：https://stackoverflow.com/questions/4503247/keep-hover-state-applied-until-user-mouses-over-another-element

标签

jquery

hoverintent