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

Question

我正在为这段代码使用 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>

Answer 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>

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

Change one Icon to another when we hover over the different element

html

css

button

hover

drop-down-menu