文章/答案/技术大牛

发布

社区首页 >问答首页 >当我们在不同元素上悬停时，将一个图标更改为另一个图标。

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

Stack Overflow用户

提问于 2021-09-11 08:00:58

回答 1查看 757关注 0票数 0

对于这段代码，我正在使用字体，当我在下拉列表上悬停时，我想要的是将⬇️图标更改为⬆️。不知何故，当我们悬停在它的父元素上时，我想出了改变它的方法。但是，当我们需要在其父元素之外的元素上悬停时，如何更改它，就像在本例中那样。如果能帮忙，我们将不胜感激。谢谢:)

这是我的代码的结果

在这里，在下拉列表上盘旋之后，我需要箭头⬇️来转⬆️。

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

css

button

drop-down-menu

hover

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-11 08:10:42

可以将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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69141113

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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