当我们将鼠标悬停在不同的元素上时，将一个图标更改为另一个答案

【问题标题】：Change one Icon to another when we hover over the different element当我们将鼠标悬停在不同的元素上时，将一个图标更改为另一个
【发布时间】：2021-11-07 11:21:24
【问题描述】：

我在此代码中使用 Font Awesome，当我将鼠标悬停在 下拉列表 上时，我想要将 ⬇️ 图标更改为 ⬆️。不知何故，当我们将鼠标悬停在其父元素上时，我想办法改变它。但是，当我们需要将鼠标悬停在其父元素之外的元素上时，我该如何更改它，就像在这种情况下一样。对它的帮助将不胜感激。谢谢:)

This is the result of my code

这里，悬停在下拉列表上后，我需要箭头⬇️转⬆️

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

.drop-down-menu:hover .drop-down-list {
  display: flex;
  flex-direction: column;
  gap: 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>
  <script src="https://kit.fontawesome.com/722021f5b4.js" crossorigin="anonymous">
  </script>
</head>

<body>
  <div class="drop-down-menu">
    <a class="btn" href="#">
              Products <span><i class="fas fa-angle-down"></i></span>
    </a>
    <div class="drop-down-list">
      <a class="drop-down-links" href="#">Link 1</a>
      <a class="drop-down-links" href="#">Link 2</a>
      <a class="drop-down-links" href="#">Link 3</a>
    </div>
  </div>
</body>

【问题讨论】：

标签： html css button drop-down-menu hover

【解决方案1】：

您可以将hover 触发器应用于父元素并更改btn 样式，如下所示：

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

.drop-down-menu:hover .drop-down-list {
  display: flex;
  flex-direction: column;
  gap: 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>
  <script src="https://kit.fontawesome.com/722021f5b4.js" crossorigin="anonymous">
  </script>
</head>

<body>
  <div class="drop-down-menu">
    <a class="btn" href="#">
              Products <span><i class="fas fa-angle-down"></i></span>
    </a>
    <div class="drop-down-list">
      <a class="drop-down-links" href="#">Link 1</a>
      <a class="drop-down-links" href="#">Link 2</a>
      <a class="drop-down-links" href="#">Link 3</a>
    </div>
  </div>
</body>

【讨论】：