当鼠标悬停在该元素上时，隐藏伪元素。

Question

我的菜单垂直放置在页面的左侧，在<li>之间有一个作为分隔符的:after。我想要实现的是，当我悬停在元素本身（如果它是第一个元素）或上面和下面的元素（如果它是中间的元素），隐藏after元素，如果它是最后一个子元素，则只隐藏前一个<li>的: after 元素。这可能听起来很困惑，但这里是我的代码：

.menu {
  float: left;
  color: white;
}
.menu > ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
.menu > ul > li {
  display: block;
  position: relative;
  padding: 60% 5px;
  background-color: #048990;
  cursor: pointer;
  transition: all 0.5s;
}
.menu > ul > li:hover {
  background-color: #444;
  color: white;
}
.menu > ul > li:hover .menu > ul > li::after {
  opacity: 0;
}
.menu > ul > li:active {
  background-color: #444;
}
.menu >ul >li:after {
  content: "";
  background: #FFF;
  position: absolute;
  bottom: 0;
  left: 7%;
  height: 1px;
  width: 86%;
}
.menu > ul > li:last-child:after {
  display: none;
}

<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

JSFiddle

现在我想做的就是像这样：

需要涉及IT技术相关内容，暂无更多信息。

.menu > ul > li:hover + .menu > ul > li::after
{
    opacity: 0;
}

但是它没有起作用。任何帮助将不胜感激。

- Arman Momeni

---

.menu > ul > li:hover::after - Harry

@Harry 谢谢，速度很快，而且有效。你能帮我处理中间的部分吗？如果可以的话，请将其发布为答案，这样我就可以标记它了。谢谢。 - Arman Momeni

你不能使用纯CSS选择器来隐藏前一个元素的 ::after，因为CSS选择器只能选择当前元素后面的子元素、后代和兄弟元素（而不是之前的元素）。不管怎样，我会发布另一种方法作为答案。 - Harry

Answer 1

下面的选择器不起作用，因为在使用“+”相邻兄弟组合器时，不应重复完整的选择器。这将尝试选择位于.menu > ul下方，也就是紧接着正在悬停的li的相邻兄弟元素中的li::after。

.menu > ul > li:hover + .menu > ul > li::after {
    opacity: 0;
}

如果您想选择正在悬停的

的::after（或）元素，则应将其编写为.menu>ul>li:hover::after，如果您想选择是被悬停的

相邻兄弟的

的::after元素，则应将其编写为.menu>ul>li:hover+li::after。

---

您当前使用的方法的另一个问题是CSS选择器只能用于选择在DOM中当前元素后出现的子代或同级元素。它们不能用于目标前一个同级元素，因此，如果每个元素的::after用于创建分隔符，则无法隐藏顶部的分隔符。

相反，我们可以使用::before（除了第一个子元素之外的所有元素）来创建分隔符。在这种情况下，我们可以使用CSS选择器在悬停时隐藏当前元素的::before和下一个元素的::before。

.menu {
  float: left;
  color: white;
}
.menu > ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
.menu > ul > li {
  display: block;
  position: relative;
  padding: 60% 5px;
  background-color: #048990;
  cursor: pointer;
  transition: all 0.5s;
}
.menu > ul > li:hover {
  background-color: #444;
  color: white;
}
.menu > ul > li:hover + li::before,
.menu > ul > li:hover::before {
  opacity: 0;
}
.menu > ul > li:active {
  background-color: #444;
}
.menu >ul >li:not(:first-child)::before {
  content: "";
  background: #FFF;
  position: absolute;
  top: 0;
  left: 7%;
  height: 1px;
  width: 86%;
}

<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

- Harry