ton&gt;將鼠標懸停在<a>標簽上以更改標簽內的按鈕</a><a>顏色</a>

Question

我的網頁構造為：

   <a class="hoverMe" href="">   
      <div class="somediv1">
         <div class="somediv2">
           <div class="somediv3">
              <button class="changeColor"></button>
           </div>
          </div>   
      </div>
   </a> 


   <a class="hoverMe" href="">   
      <div class="somediv1">
         <div class="somediv2">
           <div class="somediv3">
              <button class="changeColor"></button>
           </div>
          </div>   
      </div>
   </a> 

我希望能夠更改懸停在特定<a> </a>內的按鈕的顏色。 我應該如何編寫 javascript 來做到這一點？ 非常感謝你的幫忙！

Answer 1

首先，您只需要一個按鈕來觸發 JS onclick 事件。 在其他所有情況下，您都使用 div 來設置“按鈕”的樣式。 按鈕也不是空標簽，因此需要一個結束標簽<button>Text</button>

像這樣：

 a { text-decoration: none; color: black; } a div { border: 1px solid black; width: min-content; white-space: nowrap; padding: 5px; }

 <a href=""><div>I'm a Link-Button</div></a>

在hover期間改變顏色，你不需要JS。 您可以像這樣簡單地使用:hover偽選擇器：

 a { text-decoration: none; color: black; } a div { border: 1px solid black; width: min-content; white-space: nowrap; padding: 5px; } a:hover div { background-color: red; }

 <a href=""><div>I'm a Link-Button</div></a>

由於您堅持使用無效的 HTML 並且似乎不理解以下代碼的用法：hover 與您的代碼相同：

 .hoverMe:hover.changeColor { background-color: red; }

 <a class="hoverMe" href=""> <div class="somediv1"> <div class="somediv2"> <div class="somediv3"> <button class="changeColor">Button 1</button> </div> </div> </div> </a> <a class="hoverMe" href=""> <div class="somediv1"> <div class="somediv2"> <div class="somediv3"> <button class="changeColor">Button 2</button> </div> </div> </div> </a>

Answer 2

這是一個非常基本的問題，檢查文檔通常可以幫助您。 看看這個

:hover偽選擇器的使用將幫助您實現您想要的。 在我們的示例中，我們看到了a:hover操作，它啟用了 hover 顏色更改。

 a:hover { background-color: yellow; } a { font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; }

 <a href="https://www.w3schools.com">w3schools.com</a> <a href="https://www.wikipedia.org">wikipedia.org</a> <p><b>Note:</b> The:hover selector style links on mouse-over.</p>