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

I am using Font Awesome for this code and what I want is to change the ⬇️ icon to ⬆️ when I hover over the drop-down-list . Somehow I figured out to change it when we hover over its parent element. But how do I change it when we need to hover on the element outside its parent element like in this case. A help over it will be appreciated. Thanks :)

This is the result of my code

Here, after hovering over the drop down list, I need the arrow ⬇️ to turn ⬆️

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

CodePudding user response：

You can apply the hover trigger to the parent element and change the btn style like so:

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