悬停此元素时隐藏伪元素后答案

【问题标题】：Hide pseudo after element when hovering this element悬停此元素时隐藏伪元素后
【发布时间】：2016-01-31 08:03:09
【问题描述】：

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

.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

现在我想做的就是这样：

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

但它不起作用。任何帮助，将不胜感激。

【问题讨论】：

.menu > ul > li:hover::after
@Harry 谢谢，速度很快，而且有效，你能帮我解决中间问题吗？如果可能的话，将其发布为答案，以便我标记它。谢谢
您不能使用纯 CSS 选择器来隐藏前一个元素的 ::after，因为 CSS 选择器只能选择当前元素之后的子元素、后代、兄弟姐妹（而不是之前的元素）。无论如何，我会发布一个不同的方法作为答案。

标签： html css css-selectors

【解决方案1】：

下面的选择器将不起作用，因为在使用 + 相邻兄弟组合器时不应重复完整的选择器。这将尝试选择位于.menu > ul 下的li::after，而.menu > ul 又是悬停在其上的li 的相邻兄弟。

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

如果你想选择悬停在上面的li 的::after，它应该写成.menu > ul > li:hover::after，或者如果你想选择::after 的.menu > ul > li:hover + li::after 元素li 是悬停在 li 上的相邻兄弟。

您当前使用的方法的另一个问题是 CSS 选择器只能用于选择出现在 DOM 中当前元素之后的子代、后代或兄弟姐妹。它们不能用于定位之前的兄弟姐妹，因此如果每个元素的 ::after 用于创建分隔符，则永远无法隐藏顶部的分隔符。

相反，我们可以使用::before 元素（除了first-child 之外的所有元素）来创建分隔符。在这种情况下，我们可以使用 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>

【讨论】：