javascript - 悬停切换图像故障

Question

HTML:

<div id="logo"></div>    
<div id="coming-soon"></div>

JavaScript:

$(document).ready(function(){
    $("#logo").hover(
        function(){
            $("#logo").fadeTo(300, 0);
            $("#coming-soon").fadeTo(300, 1.0);
        },
        function(){
            $("#logo").fadeTo(300, 1.0); 
            $("#coming-soon").fadeTo(300, 0); 
        });
});

现在 #logo 元素在悬停时淡出，#coming-soon 淡入，反之亦然，当鼠标从元素上移开时(这正是我想要的)，但是将鼠标悬停在淡入的新元素(“即将推出”文本)上会使旧元素淡入，当我不希望它淡入直到鼠标不再位于同一区域上时.

我的问题是如何修改我的代码，使鼠标悬停在 #coming-soon 元素上不会使原始元素淡入淡出？

Answer 1

你可以设置#coming-soon的z-index为-1(或者给#logo更高的z-index) .

此外，在 fadeTo() 之前使用 .stop():

$("#logo").hover(
    function(){
        $("#logo").stop().fadeTo(300, 0);
        $("#coming-soon").stop().fadeTo(300, 1.0);
    },
    function(){
        $("#logo").stop().fadeTo(300, 1.0); 
        $("#coming-soon").stop().fadeTo(300, 0);
});