當我們懸停在不同的元素上時，將一個圖示改為另一個圖示 -有解無憂

我正在使用Font Awesome來撰寫這段代碼，我想要的是當我把滑鼠懸停在下拉串列上時，把??圖示改為??。不知何故，我發現當我們把滑鼠懸停在它的父元素上時，可以改變它。但是，當我們需要在其父元素之外的元素上懸停時，我如何改變它，就像在這種情況下。如果您能提供幫助，將不勝感激。謝謝 :)

這是我代碼的結果

在這里，將滑鼠懸停在下拉串列上后，我需要箭頭??變成??

。

.drop-down-list {
  display: none;
}

.drop-down-menu:hover .drop-down-list {
  display: flex;
  flex-direction: column;
  縫隙。1rem;
  background-color: aliceblue;
  border-radius: 9px;
  box-shadow: 0 0 20px rgba（0, 0, 0, 0. 1）。)
  max-width: 20%;
  padding: 0.2rem;
  margin-top: 0.2rem;
}

.btn:hover span{
  display: none;
}

.btn:hover:after {
  content: "f106"。
  font-family: "FontAwesome" ！ important。
}

<head>/span>
  <script src="https://kit. fontawesome.com/722021f5b4.js" crossorigin="anonymous"> 
  </script>/span>
</head> 

<body> 
  <div class="drop-down-menu"> 
    < a class="btn" href="#"> 
              產品 <span>< i class="fas fa-angle-down" > </i></span> 
    </a>/span>
    <div class="drop-down-list"> 
      <a class="下拉式鏈接" href="#"/span>> 鏈接1</a> 
      <a class="drop-down-links" href="#"/span>> 鏈接2</a>/span>
      <a class="drop-down-links" href="#"/span>> 鏈接3</a>/span>
    </div>/span>
  </div>/span>
</body>/span>

uj5u.com熱心網友回復：

你可以將hover觸發器應用于父元素，并改變btn樣式，像這樣：

。

.drop-down-list {
  display: none;
}

.drop-down-menu:hover .drop-down-list {
  display: flex;
  flex-direction: column;
  縫隙。1rem;
  background-color: aliceblue;
  border-radius: 9px;
  box-shadow: 0 0 20px rgba（0, 0, 0, 0. 1）。)
  max-width: 20%;
  padding: 0.2rem;
  margin-top: 0.2rem;
}

.drop-down-menu:hover .btn span{
  display: none;
}

.drop-down-menu:hover .btn:after {
  content: "f106"。
  font-family: "FontAwesome" ！ important。
}

<head>/span>
  <script src="https://kit. fontawesome.com/722021f5b4.js" crossorigin="anonymous"> 
  </script>/span>
</head> 

<body> 
  <div class="drop-down-menu"> 
    < a class="btn" href="#"> 
              產品 <span>< i class="fas fa-angle-down" > </i></span> 
    </a>/span>
    <div class="drop-down-list"> 
      <a class="下拉式鏈接" href="#"/span>> 鏈接1</a> 
      <a class="drop-down-links" href="#"/span>> 鏈接2</a>/span>
      <a class="drop-down-links" href="#"/span>> 鏈接3</a>/span>
    </div>/span>
  </div>/span>
</body>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/320719.html

標籤：

上一篇：如何在按下/保持按鈕時停止重復-Python

下一篇：如何擺脫我的按鈕中的這個幻影元素？