Question

首先让我说我是一个jquery菜鸟，所以这可能没有多大意义。

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

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

我需要这个以某种方式工作，以便只有当你将鼠标悬停在另一个li的链接上时，li才会关闭。（对不起，这很难说出来）

继承我的代码。

$(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。但它需要保持打开，直到你将鼠标悬停在同一个类的另一个链接上。

抱歉，如果这没有多大意义：）

Answer 1

有一个函数closeTips在所有工具提示上调用makeShort，然后使用.mouseover()代替.hoverIntent()运行closeTips，然后调用{{1} }}

Answer 2

我看到你正在使用hoverIntent插件，而AFAIK插件没有你打算做的事情，也许你需要更改插件基本代码来完成你想要的。或者尝试使用原生事件mouseover mouseout来做你想要的事情，但是你需要更多编码。

Answer 3

我建议您尝试jQuery UI Accordion。有一个选项可以在鼠标悬停事件上触发它。请参阅链接右侧的“在鼠标悬停时打开”。

这会回答你的问题吗？

保持悬停状态，直到用户将鼠标悬停在另一个元素上

3 个答案: