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

Question

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

您可以在此处查看主页 www.dgimages.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" 我该怎么做？

Answer 1

在悬停时淡入和淡出div 可以完全使用 CSS 完成。您真正需要 jQuery 的唯一事情是在页面加载时执行初始延迟淡出。

诀窍其实很简单。外部容器包含您的徽标和您想要淡出的内容。当用户悬停在外部容器上并停止悬停时，要淡入淡出的容器使用 CSS 过渡淡入和淡出。因此，您最终不会使用类似#logo:hover 的东西，而是使用更像#outer:hover #fade 的东西。

Here's a fiddle demonstrating the CSS hover fade effect.

More information about CSS transitions can be found here.

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>​

还有 CSS：

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