悬停此元素时隐藏伪后元素 [英] Hide pseudo after element when hovering this element

问题描述

我的菜单垂直放置在页面的左侧，在< li> 之间有一个：之后这是一个分隔符。我想要的是隐藏后元素，当我悬停元素本身（如果它是第一个元素）或上面和底部一个，当它是中间的，如果它是最后一个孩子只是 ： c>之后的 c>元素 c>。这听起来很混乱，但这里是我的代码：

  .menu {float：left; color：white;}。menu> ul {list-style：none; text-align：center; padding：0; margin：0;}。menu> ul> li {display：block;位置：相对; 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：;背景：#FFF; position：absolute; bottom：0;左：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; 
} 
  

但它不工作。任何帮助将不胜感激。

解决方案

下面的选择器不会工作，因为使用 code>相邻兄弟组合器。这将尝试选择 .menu>下的 li :: after ul 这是转动中的 li 的相邻兄弟。

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

应该写成 .menu> ul> li：hover :: after 如果您要选择 li >正在被悬停在（或） .menu> ul> li：hover + li :: after 如果您要选择 li :: c $ c>，它是被悬停的 li 的相邻兄弟。

---

当前使用的方法的另一个问题是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;位置：相对; 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：;背景：#FFF; position：absolute; top：0;左：7％; height：1px; width：86％;}  

 < div class =菜单> < ul> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < / ul>< / div>  

My menu is placed vertically on the left side of the page and between the <li> I have an :after that is a separator. What I want to have is to hide the after element when I hover the element itself (if it's the first element) or the above and the bottom one when it's the middle one and if it's the last child just the :after element of the previous <li>. This may sound confusing but here is my code:

.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

Now all I want to do is something like this:

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

But it's not working. Any help would be appreciated.

解决方案

The below selector would not work because the full selector should not be repeated when using + adjacent sibling combinator. This would try to select the li::after that is under .menu > ul which is in-turn the adjacent sibling of the li that is being hovered on.

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

It should instead be written as .menu > ul > li:hover::after if you want to select the ::after of the li that is being hovered on (or) as .menu > ul > li:hover + li::after if you want to select the ::after element of the li that is the adjacent sibling of the li which is being hovered on.

---

The other problem with the approach that you are using currently is that CSS selectors can be used only to select the children, descendants or the siblings that appear after the current element in DOM. They cannot be used to target the previous siblings and so if the ::after of each element is used to create the separator then the separator on top can never be hidden.

Instead, we can use the ::before elements (on all but the first-child) to create the separator. In this scenario we can use CSS selectors to hide both the the current element's ::before and the next element's ::before on hover.

.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>

这篇关于悬停此元素时隐藏伪后元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！