Question

我的菜单垂直放置在页面的左侧，<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;
}

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

Answer 1

以下选择器不起作用，因为使用+相邻兄弟组合子时不应重复完整选择器。这会尝试选择位于li::after下的.menu > ul，而li依次是正在徘徊的.menu > ul > li:hover + .menu > ul > li::after { opacity: 0; }的相邻兄弟。

.menu > ul > li:hover::after

如果您想要选择::after li作为.menu > ul > li:hover + li::after的{{1}}，则应该写为::after选择li的{{1}}元素，该li元素是正在悬停的::after的相邻兄弟。

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

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

LoggingT

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

1 个答案: