Javascript 使用jQuery.animate悬停显示新div

该函数工作正常，但在单击任何链接之前，右侧的div消失。 我应该加入一个鼠标事件来让它像一个侧面的下拉菜单一样工作吗

$(".design").hover(function () {
$(".design-nav").animate({opacity: "1"}, {queue: false});
}, function () {
$(".design-nav").animate({opacity: "0"}, {queue: false});
});

<div class="design"></div>
<div class="design-nav">
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
<div><li href="#">link</li></div>
</div>

$（.design”）.hover（函数（）{
$（“.design nav”）.animate（{opacity:“1”}，{queue:false}）；
}，函数（）{
$（“.design nav”）.animate（{opacity:“0”}，{queue:false}）；
});
链接
链接
链接

或者在这里查看工作演示- 试试这个：

$(".design,.design-nav").hover(function () {
    $(".design-nav").animate({
        opacity: "1"
    }, {
        queue: false
    });
}, function () {
    $(".design-nav").animate({
        opacity: "0"
    }, {
        queue: false
    });
});

还可以更改您的

.design导航

css

opacity:0

工作 试试这个

将您的div包装在另一个div中，在这里它是

，并在其上应用hover，这样它就可以工作，否则如果您离开hover div，可见div将隐藏

html 改变

opacity:0设计导航

以便在页面加载时隐藏它

---

希望这有帮助，谢谢

不，只需添加一个超时，以便design上的鼠标移动将在10毫秒后隐藏design nav div，如果design nav div悬停在上方，则清除该超时，使其不会隐藏。谢谢，这正是我要找的@conordaltonlive如果它解决了您的问题，请将其标记为答案

<div id="container">    // added div
<div class="design"></div>
<div class="design-nav">
    <div><li href="#">link</li></div>
    <div><li href="#">link</li></div>
    <div><li href="#">link</li></div>
</div>
</div>

$("#container").hover(function () { // changed selector '.design' to '#container'
    $(".design-nav").animate({
        opacity: "1"
    }, {
        queue: false
    });
}, function () {
    $(".design-nav").animate({
        opacity: "0"
    }, {
        queue: false
    });
});