javascript - 在悬停时使用 jQuery .animate 来显示新的 div

Question

该功能正常工作，但是在我单击任何链接之前，右侧的 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>

或者在这里查看工作演示 - http://jsfiddle.net/conordaltonlive/jfLNh/3/

Answer 1

尝试这个：

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

也改变你的.design-navCSSopacity:0

在这里提琴

Answer 2

工作演示

尝试这个

将您的 div 包裹在另一个内部<div id="container">并在其上应用悬停，因此它可以工作，否则如果您离开悬停 div ，可见的 div 将隐藏。

html

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

并更改opacity: 0;类.design-nav以在页面加载时隐藏它

希望这有帮助，谢谢