懸停切換圖像選擇峯值

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謝謝，我沒有意識到它有這個問題。我嘗試了您建議的代碼，出於某種原因，懸停效果在我第一次懸停時無法使用。我必須關閉鼠標並第二次懸停以啓動效果。有任何想法嗎？ –

懸停切換圖像選擇峯值

回答

相關問題