javascript - 将鼠标悬停在链接上，切换 div 可见性，直到鼠标同时离开链接和 div

Question

通常的问题是:“如何将鼠标悬停在一个 thingOne 上并让 thingOneFriend 滑动打开？”

添加到:“如何让 thingOneFriend 打开直到鼠标离开任一元素？”

另外请注意，thingOneFriend 不包含在 thingOne 中。

所以:

<div>
    <ul>
        <li><a href="blerg" id="#thingOne"></li>
        <li><a href="blarg" id="#thingTwo"></li>
        <li><a href="blorg" id="#thingThree"></li>
    </ul>
    <div id="thingOneFriend">I'm normally hidden</div>
    <div id="thingTwoFriend">Me too.</div>
    <div id="thingThreeFriend">Word.</div>
</div>

Fiddle Here

我试过:

$(“#thingOne”).hover(function () {
    $("#thingOneFriend").slideToggle(400);
});

Answer 1

使用 jQuery 库(使用 JS 语言).mouseOver() method

这是您的问题的示例:

<a href="#" id="hover">onHover this will open a little window</a>
<div id="hidden" style="display: none;">Hello</div>

和脚本:

$( "#hover" ).mouseover(function() {
    $( "#hidden" ).css( "display", "block" );
});
$( "#hover" ).mouseout(function() {
    $( "#hidden" ).css( "display", "none" );
});

您可以使用 onmouseout当鼠标离开链接时保持可见性隐藏。您可能还会阅读有关方法 .css() 的信息

http://jsfiddle.net/m7nqoqpr/1/