保持应用悬停状态，直到用户将鼠标悬停在另一个元素上 [英] Keep hover state applied until user mouses over another element

问题描述

首先让我声明我是一个jquery noob，所以这可能没有多大意义.

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

所以我有一系列列表项，如果用户将鼠标悬停在项目内部的链接上(而不是整个列表项本身)，它们会展开以显示一个隐藏的div

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)

问题是，如果用户鼠标离开链接，则li将再次关闭.

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

我需要这样做，以便仅当您将鼠标悬停在另一个li的链接上时，该li才会关闭. (对不起，这很难说出来)

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)

这里是我的代码.

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

和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>

因此带有"home_upcoming_title"类的链接将li展开以显示div内部，但是当我将鼠标悬停在div本身上时，列表将关闭.我也需要它，因此只有类"home_upcoming_title"会扩展div.但它需要保持打开状态，直到您将鼠标悬停在同一个类的另一个链接上.

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

推荐答案

我看到您正在使用hoverIntent插件，而AFAIK插件没有您要执行的操作，也许您需要更改插件基本代码才能完成你想要什么.或者尝试使用本机事件mouseover mouseout来执行您想要的操作，但是这将需要您进行更多的编码.

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.

这篇关于保持应用悬停状态，直到用户将鼠标悬停在另一个元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！