悬停以切换图像故障

Hover to Switch Images Glitch

本文关键字：图像 故障 悬停      更新时间：2023-09-26

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元素上不会使原始元素淡入？

您可以将#coming-soon的 z 索引设置为 -1(或为#logo提供更高的 z 索引(。

另外，请在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);
});

只要给#logo一个比 CSS 中的 #coming-soon 更高的 z 索引。 

#logo{ z-index: 1; } 
#coming-soon{ z-index: 0; }
相关文章：