如何解决使用哪个css3选择器选择悬停时的最后一个子元素?
| 是否可以做这样的事情:<div>
<ul>
<li>
<span>Something</span>
</li>
<li>
<span>Something</span>
</li>
<li>
<span>Something</span>
</li>
</ul>
<p>Some text</p>
</div>
因此,当我将鼠标悬停在任何\'li \'标签上时,\'p \'标签会受到影响。我知道我可以通过以下示例影响\'span \':
li:hover span{
/* Whatever css that is needed */
}
我正在与第n个孩子一起思考某件事,我是否正以正确的方式进行思考?
div li:hover <some nth child syntax that I don\'t know>{
/* Whatever css that is needed */
}
还是我愿意接受其他任何想法,只要它们严格地是CSS ... :-)也不必担心浏览器的交叉兼容性...
解决方法
我认为您追求的是jQuery的
:has()
选择器。不幸的是,这不是任何CSS规范的一部分。
这样使用:div:has(li:hover) > p
。
不过,在标准CSS中,我认为这是不可能的。
如果您想在ѭ5的任何部分都悬停时(包括它的孩子)设置p的样式,那么它将起作用(演示):
ul:hover + p {
color: red;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。