Question

我有一个导航栏，其中包含一系列链接和一个搜索栏。它看起来像这样：

<ul>
  <li class="link">Link 1</li>
  <li class="link">Link 2</li>
  <li class="link">Link 3</li>
  <li class="link search">search</li>
</ul>

当用户悬停"search"元素时，我想

将500px的宽度应用于悬停的搜索元素

将-150px的边距应用于同级"link"元素

我写这篇文章的CSS是：

  ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 500px;
  float: right;
}

.link {
  width: 150px;
  float: left;
  line-height: 80px;
}

.search {
  background: red;
  width: 50px;
}

.search:hover{
  width: 500px
}

.search:hover + .link {
  margin-left: -150px;
}

然而，这对兄弟"link"元素

没有影响

使用纯CSS，是否可以在"margin-left: -150px"的悬停上应用声明"search"？

我在这里创造了一个小提琴来说明问题

https://jsfiddle.net/qut1nz9j/

Answer 1

如果你使用flex，你可以这样做。 (Current browser support ~96%)`

诀窍是您将搜索链接放在标记的第一位，并使用order最后显示。有了这个，您可以使用兄弟选择器~来实现您想要的目标。

nav {
  width: 700px;
  background: green;
  height: 80px;
  float: left;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 500px;
  display: inline-flex;
}
.link {
  width: 150px;
  line-height: 80px;
  order: 1;
}
.search {
  background: red;
  width: 50px;
  order: 2;
}
.search:hover {
  width: 500px
}

<nav>
  <span>Site Name</span>

  <ul>
    <li class="link search">search</li>
    <li class="link">Link 1</li>
    <li class="link">Link 2</li>
    <li class="link">Link 3</li>
  </ul>
</nav>

感谢Joum，这是我的解决方案的一个很好的补充：https://jsbin.com/yipujadewi/edit?css,output

如果某人确实需要定位以前的兄弟，并且无法使用flex，则此行为与direction: ltr/rtl一起滥用display: table。

Src：CSS Tables, Invert order of displayed content

nav {
  width: 700px;
  background: green;
  height: 80px;
  float: left;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 500px;
  display: inline-table;
  direction: rtl;
}
.link {
  width: 150px;
  line-height: 80px;
  display: table-cell;
  direction: ltr;
  text-align: left;
}
.search {
  background: red;
  width: 50px;
}
.search:hover {
  width: 500px
}
.search:hover ~ .link {
  color: #fff;
}

<nav>
  <span>Site Name</span>

  <ul>
    <li class="link search">search</li>
    <li class="link">Link 3</li>
    <li class="link">Link 2</li>
    <li class="link">Link 1</li>
  </ul>
</nav>

悬停元素以影响兄弟元素

1 个答案: