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-nav css opacity:0

Fiddle Here

Answer 2

正在工作 DEMO

试试这个

将你的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，以便在页面加载时隐藏它

希望这有帮助，谢谢

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

2 个答案:

正在工作 DEMO

HTML

码