Jquery 将鼠标悬停在单独的div上，然后重新打开另一个淡出的div

我希望能够将鼠标悬停在主屏幕上的徽标上，以恢复下方div中褪色的文本和图像。（文本和图像在页面打开9秒后淡出，除非被鼠标打断）

您可以在这里查看主页www.dgmiages.co.nz

我的淡入淡出等的JS代码如下，但我想做的事情可能不需要它：

$(document).ready(function() {
var fade = setTimeout(function(){
    $("div.left-col-wrap-outer").fadeOut("slow", function () {
            $("div.left-col-wrap-outer").remove();
    });
}, 9000);

    $("div.left-col-wrap-outer").mouseout(function(e) {
    fade = setTimeout(function(){
        $("div.left-col-wrap-outer").fadeOut("slow", function () {
                $("div.left-col-wrap-outer").remove();
        });
    }, 9000);
});

    $("div.left-col-wrap-outer").mouseover(function() {
    clearTimeout(fade);
    });

});

我的徽标位于div class=“logo”中

---

如何做到这一点？

完全可以使用CSS在悬停状态下淡入淡出

div

。您真正需要jQuery的唯一一件事是在页面加载时执行初始延迟淡出

这个技巧其实相当简单。外部容器包含您的徽标和您希望褪色的内容。当用户悬停在外部容器上并停止悬停时，要淡入淡出的容器将使用CSS转换淡入淡出。因此，您没有使用类似于

#logo:hover

，而是使用了类似于

#outer:hover#fade

HTML：

<div id="outer">

    <img /> <!-- Your logo -->

    <div id="fade">
        <img /> <!-- Any images you want in the faded out menu -->
        <h3>I like bells.</h3>
    </div>

</div>​

---

为什么要在元素褪色后调用

.remove（）

？很高兴看到它是如何使用CSS完成的，但是我想我更喜欢四行jQuery而不是二十行CSS。（特别是当需要jQuery在页面加载时）哈哈。使用这两种解决方案可能有点过头了。

#outer {
    width:120px;
}

#fade {
    opacity:0;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:1s;
    -moz-transition-property:opacity;
    -moz-transition-duration:1s;
    -ms-transition-property:opacity;
    -ms-transition-duration:1s;
    -o-transition-property:opacity;
    -o-transition-duration:1s;
}

#outer:hover #fade {
    opacity:1;
    -webkit-transition-property:opacity;
    -webkit-transition-duration:1s;
    -moz-transition-property:opacity;
    -moz-transition-duration:1s;
    -ms-transition-property:opacity;
    -ms-transition-duration:1s;
    -o-transition-property:opacity;
    -o-transition-duration:1s;
}