悬停切换图像选择峰值

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

来源

2011-12-08 Danny Cooper

您可以设置#coming-soon的Z-指数-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); 
});

来源

2011-12-08 01:22:57 Purag

只需在您的CSS中给#logo一个比#coming-soon更高的z-index。

来源

2011-12-08 01:16:45

完美，谢谢！ –

@DannyCooper：我看了一下你的网站，如果你反复徘徊在图像和图像之外，动画队列就会建立起来。要停止这个，你可以在'fadeTo（）'之前使用'.stop（）'，就像我在我的回答中所说的那样。 – Purag

@Purmou谢谢，我没有意识到它有这个问题。我尝试了您建议的代码，出于某种原因，悬停效果在我第一次悬停时无法使用。我必须关闭鼠标并第二次悬停以启动效果。有任何想法吗？ –

悬停切换图像选择峰值

回答

相关问题