在懸停時使用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-nav css opacity: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類，以便在頁面加載時隱藏它

希望這有幫助，謝謝