如何通過將鼠標懸停在不同容器中的元素/鏈接上來更改一個容器的內容

Question

我目前正在開發一個電子目錄。 根據 Stackoverflow 貢獻者的建議，我現在有了一個帶有下拉菜單的導航欄，可以生成一個包含兩個容器的菜單。 接下來，我試圖以這樣一種方式設置它，當一個容器（左側容器）中的特定元素懸停時，下拉列表的另一個容器（右側）的內容會更改並允許用戶，與正確容器的更改內容進行交互。

我正在使用“mouseenter”和“mouseleave”事件處理程序，是的，你已經猜到了，當我離開元素（在左側容器中）時，我將鼠標懸停在觸發更改（在右側容器中），內容正確的容器反轉回原來的內容！

為了解決這個問題，在 mouseenter eventlistener 函數中，我編寫了第二個 mouseenter eventlistener 函數，這次是針對正確的容器本身。 我希望如果我離開元素（在左側容器中），觸發右側容器中的更改，然后進入右側容器，我將能夠與右側容器中更改的內容進行交互。 唉，它奏效了！

然而，現在的問題是，每當我將鼠標懸停在右容器上時，內容都會發生變化，就好像我將鼠標懸停在左容器中的特定元素上一樣，無論我是否實際上將鼠標懸停在左容器中的那個元素上。

我嘗試了許多方法，包括“mouseout”（“冒泡”），還嘗試為兩個 mouseenter 事件函數命名，以便正確容器的 mouseenter 事件的“內部”函數僅在“左側容器中元素的 mouseenter 事件的 external' 函數已執行（一種非常 Python 主義的思維方式！），但沒有任何效果。

我需要為左容器中的元素保留某種 mouseout 或 mouseleave 事件； 否則，當您將鼠標移到左側容器中的其他元素上時，右側容器中的更改將持續存在。

最終，我希望左側容器中的每個元素觸發右側容器內容的不同變化，就像您在此處的下拉列表中看到的一樣。

我的代碼的最小工作版本如下所示：

 // block-1h selectors const breakingLine = document.querySelector(".breakingline"); const breaking = document.querySelector(".breaking"); // block-2h selector(s) const block2H = document.querySelector(".block-2h"); const drop2HCaptionText = document.querySelector(".drop-2h-captiontext"); // Event listeners breakingLine.addEventListener("mouseenter", function() { drop2HCaptionText.textContent = "Camon C2000 Rotavator"; block2H.addEventListener("mouseenter", function() { drop2HCaptionText.textContent = "Camon C2000 Rotavator"; }) }) breaking.addEventListener("mouseleave", function() { drop2HCaptionText.textContent = "Boss Ladderspan 3T Scaffold Tower (Single Width)"; block2H.addEventListener("mouseleave", function() { drop2HCaptionText.textContent = "Boss Ladderspan 3T Scaffold Tower (Single Width)"; }) })

 .nav-list { list-style: none; border: 1px solid blue; display: flex; flex-flow: row wrap; align-items: left; justify-content: left; color: white; background-color: #429CD9; } #hire-dropdown { position: absolute; cursor: pointer; padding-right: 3em; padding-left: 3em; } .hdrop, .block-1h, .block-2h { display: none; } #hire-dropdown:hover * { display: grid; } #hire-dropdown .hdrop { grid-template-areas: "block-1h block-2h"; grid-template-columns: 1fr 1fr; } .block-1h { grid-area: "block-1h"; height: 30em; } .block-2h { grid-area: "block-2h"; background-color: white; border: 1px solid black; height: 40em; } .drop-1h-list { list-style: none; display: block; border: 1px solid black; background-color: white; height: 40em; } .drop-most-popular-hire, .drop-2h-captiontext { color: #3D3F41; } .drop-most-popular-hire { padding-left: 3em; }

 <nav> <ul class="nav-list"> <li>Nothing</li> <li class="to-hire"> <div id="hire-dropdown">To Hire <div class="hdrop"> <div class="block-1h"> <ul class="drop-1h-list"> <li><a href="#">Access</a></li> <li class="breakingline"><a class="breaking" href="#">Breaking</a></li> <li class="compactionline"><a class="compaction" href="#">Compaction</a></li> </ul> </div> <div class="block-2h"> <h3 class="drop-most-popular-hire">Our most popular product in this category</h3> <p class="drop-2h-captiontext">Boss Ladderspan 3T Scaffold Tower (Single Width)</p> </div> </div> </div> </li> </ul> </nav>

您的（建設性）幫助將不勝感激。

Answer 1

您可以刪除mouseleave事件偵聽器。

當您在左側容器中輸入 li 元素時，將觸發mouseenter事件偵聽器並更改右側容器中的文本。

只有當您在左側容器中輸入另一個元素時，內容才會更改為另一個文本。

 const drop2HCaptionText = document.querySelector(".drop-2h-captiontext"); let texts = [ "Boss Ladderspan 3T Scaffold Tower (Single Width)", "Camon C2000 Rotavator", "Boss Ladderspan 3T Scaffold Tower (Single Width)", ] let listItems = document.querySelectorAll('.drop-1h-list li'); listItems.forEach((item, index) => { item.addEventListener('mouseenter', () => { drop2HCaptionText.textContent = texts[index]; }) })

 .nav-list { list-style: none; border: 1px solid blue; display: flex; flex-flow: row wrap; align-items: left; justify-content: left; color: white; background-color: #429CD9; } #hire-dropdown { position: absolute; cursor: pointer; padding-right: 3em; padding-left: 3em; } .hdrop, .block-1h, .block-2h { display: none; } #hire-dropdown:hover * { display: grid; } #hire-dropdown .hdrop { grid-template-areas: "block-1h block-2h"; grid-template-columns: 1fr 1fr; } .block-1h { grid-area: "block-1h"; height: 30em; } .block-2h { grid-area: "block-2h"; background-color: white; border: 1px solid black; height: 40em; } .drop-1h-list { list-style: none; display: block; border: 1px solid black; background-color: white; height: 40em; } .drop-most-popular-hire, .drop-2h-captiontext { color: #3D3F41; } .drop-most-popular-hire { padding-left: 3em; }

 <nav> <ul class="nav-list"> <li>Nothing</li> <li class="to-hire"> <div id="hire-dropdown">To Hire <div class="hdrop"> <div class="block-1h"> <ul class="drop-1h-list"> <li><a href="#">Access</a></li> <li class="breakingline"><a class="breaking" href="#">Breaking</a></li> <li class="compactionline"><a class="compaction" href="#">Compaction</a></li> </ul> </div> <div class="block-2h"> <h3 class="drop-most-popular-hire">Our most popular product in this category</h3> <p class="drop-2h-captiontext">Boss Ladderspan 3T Scaffold Tower (Single Width)</p> </div> </div> </div> </li> </ul> </nav>