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

使用CSS可以完全淡入div进出悬停。您真正需要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;
}

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

1 个答案: