html - 悬停此元素时在元素后隐藏伪

Question

我的菜单垂直放置在页面左侧，介于<li> 之间。我有一个 :after那是一个分隔符。我想要的是当我悬停元素本身时隐藏后元素(如果它是第一个元素)或者当它是中间元素时隐藏上面和底部的元素，如果它是最后一个 child 只是 :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;
}

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

Answer 1

下面的选择器将不起作用，因为在使用 + 时不应重复完整的选择器相邻兄弟组合器。这将尝试选择 li::after在 .menu > ul 下这又是 li 的相邻 sibling 正在徘徊。

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

它应该写成 .menu > ul > li:hover::after如果你想选择 ::after的 li悬停在(或)作为.menu > ul > li:hover + li::after如果你想选择 ::after li 的元素那是 li 的相邻 sibling 正在悬停。

---

您当前使用的方法的另一个问题是 CSS 选择器只能用于选择出现在 DOM 中当前元素之后的子元素、后代元素或同级元素。它们不能用于定位 previous sibling 姐妹，所以如果 ::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>