Question

我一直试图使所有其他链接在被悬停时缩小，但是到目前为止，它仅在被悬停的那之后缩小链接

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

Answer 1

您可以尝试使用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>

Answer 2

我建议使调整大小的宽度等于开始时的宽度。如果您在100px开头有四个元素，这将使总宽度为400px（加上任何边距/填充内容），那么也要使调整大小后的元素等于400px以确保你不会得到任何奇怪的东西。

.navlink {
  display: inline-block;
  width: 100px;
  background-color: red;
  transition: width 0.3s;
}

.container:hover .navlink:not(:hover) {
  width: 75px;
}

.navlink:hover {
  width: 175px;
  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>

Answer 3

尝试使用此html代码：

<div class="parent">
  <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>

y css：

.navlink {
  width:100px;
  background-color:red;
  display:inline-block;
}
.parent:hover .navlink{
  width:50px;
}
.parent .navlink:hover{
  width:150px;
  background-color:pink;
}

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

3 个答案: