懸停相同或其他元素的淡入淡出元素？

因爲我認爲這不是一個非常複雜的任務，我用不同的搜索搜索了幾次stackoverflow。但由於我真的不知道如何用幾句話來描述搜索到的解決方案，所有搜索都失敗了。懸停相同或其他元素的淡入淡出元素？

這是我使用彈出一個導航頁面加載時，淡化出來4秒鐘後和褪色回徘徊在導航DIV當一個碼 - 和衰落出來當鼠標離開：

$(".navigation").delay(4000).fadeTo(1000, 0); 
$(".navigation").on({ 
    mouseleave: function() { 
     $(this).delay(200).fadeTo(100, 0); 
    }, 
    mouseenter: function() { 
     $(this).stop().fadeTo(100, 1); 
    } 
});

現在我正在尋找添加的代碼，讓導航淡入，而導航div本身或另一個div元素被徘徊......並淡出導航div當這個div本身或另一個留下的老鼠。

我可以加強這個代碼來實現這個目標還是我需要不同的東西？

非常感謝你！馬蒂亞斯

來源

2017-06-05 Matthias Ballmann

我會通過共享的一條重要信息，可以幫助你解決這個問題開始：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget

在這裏你可以看到，無論mouseenter和mouseleave在其事件數據的relatedTarget屬性。它分別引用「來自」或「去往」元素。

下面我創建了一個解決方案，其中div A和B充當mousein和mouseout方面的「連接」。在mouseenter我只有在「從哪裏來」元素既不是A也不B. 執行處理期間mouseleave如果「去」元素既不是我只執行處理，也不B.

$('.show-navigation').on('mouseenter', function(e) { 
 
    if (!$(e.relatedTarget).hasClass('show-navigation')) { 
 
    console.log('Show Navigation'); 
 
    } 
 
}); 
 

 
$('.show-navigation').on('mouseleave', function(e) { 
 
    if (!$(e.relatedTarget).hasClass('show-navigation')) { 
 
    console.log('Hide Navigation'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a" class="show-navigation">Element A</div> 
 
<div id="b" class="show-navigation">Element B</div> 
 
<div id="c">Element C</div>

來源

2017-06-05 20:38:49

啊，多快回復 - 謝謝，我現在就試試看。並感謝您的鏈接！我已經在jquery的網站上，但我嘗試的解決方案淡入淡出所有內容，但沒有導航。 –

好吧，我試了一下代碼，看看它在做什麼。但是我怎樣才能「實現」到我的代碼？我對js不太好，上面的代碼花了我好幾天的時間才弄清楚，因爲有很多方法可以做到。我希望它可以像添加一個額外的類/元素到mouseenter-function，以觸發淡入與另一個元素。 –

我不知道你的html和你的設置的具體細節。我提出的只是一個概念。我建議你花點時間並嘗試自己實施。 –

懸停相同或其他元素的淡入淡出元素？

回答

相關問題