在此元素悬停时隐藏伪元素
在此元素悬停时隐藏伪元素
提问于 2016-01-31 08:03:09
我的菜单垂直放置在页面的左侧，在<li>之间有一个:after，它是一个分隔符。当我将元素本身(如果是第一个元素)或上面和底部的元素悬停在中间元素时，如果它是最后一个子元素，我想要隐藏它，如果它是前一个: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>
现在我只想做这样的事情：
.menu > ul > li:hover + .menu > ul > li::after
{
opacity: 0;
}但这不管用。任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-31 08:19:52
下面的选择器不能工作，因为在使用+相邻的同级组合器时，不应该重复完整的选择器。这将尝试选择位于li::after下的.menu > ul，它是正在盘旋的li的相邻同级。
.menu > ul > li:hover + .menu > ul > li::after {
opacity: 0;
}相反，如果要选择悬浮在(或)上的.menu > ul > li:hover::after的::after (或)为.menu > ul > li:hover + li::after，则应该将其编写为.menu > ul > li:hover + li::after，如果您希望选择悬浮在li上的与li相邻的同级的li元素的::after元素。
当前使用的方法的另一个问题是，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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35111639
复制相关文章
相似问题
腾讯云开发者
