时间戳

首页 > 解决方案 > 悬停时如何仅影响其他链接

css - 悬停时如何仅影响其他链接

问题描述

我一直在尝试使所有其他链接在悬停时缩小，但到目前为止，它只会在悬停后缩小链接

.navlink {
  width: 100px;
  display:inline-block;
  background-color: red;
}

.navlink:hover~.navlink {
  width: 50px;
}

.navlink:hover {
  width: 150px;
  background-color: pink;
}
<a class="navlink">link 1</a>
<a class="navlink">link 2</a>
<a class="navlink">link 3</a>
<a class="navlink">link 4</a>

标签： css

解决方案

您可以为此尝试使用flexbox，您只需要调整悬停的链接，另一个默认会缩小

.container {
  display: flex;
  width: 400px;
}

.navlink {
  flex: 1;
  margin: 0 5px;
  background-color: red;
  transition: 0.3s all;
}

.navlink:hover {
  flex: 3; /*Adjust this to control the size*/
  background-color: pink;
}
<div class="container">
  <a class="navlink">link 1</a>
  <a class="navlink">link 2</a>
  <a class="navlink">link 3</a>
  <a class="navlink">link 4</a>
</div>

推荐阅读