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

只需在CSS中为#logo提供比#coming-soon更高的z-index。

#logo{ z-index: 1; } 
#coming-soon{ z-index: 0; }

Answer 2

您可以将#coming-soon的z-index设置为-1（或者为#logo提供更高的z-index）。

另外，请在.stop()之前使用fadeTo()：

$("#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);
});

将鼠标悬停在Switch Images Glitch上

2 个答案: