通过 CSS 将鼠标悬停在父元素上时显示 :after
Posted
技术标签:
【中文标题】通过 CSS 将鼠标悬停在父元素上时显示 :after【英文标题】:Show :after when hovering over the parent element via CSS 【发布时间】:2013-03-07 11:57:06 【问题描述】:当我将鼠标悬停在父元素本身上时,是否可以 display:block;
:after
伪元素?
#myDiv
position:relative;
width:50px;
height:50px;
border-style:solid;
background-color:red;
#myDiv:after
position:absolute;
content:"";
display:none;
width:50px;
height:50px;
border-style:solid;
background-color:blue;
我累了:
#myDiv:hover #myDiv:after
display:block;
#myDiv:hover + #myDiv:after
display:block;
#myDiv:hover > #myDiv:after
display:block;
但运气不好,这是fiddle。
【问题讨论】:
【参考方案1】:改成#myDiv:hover::after
您可以使用:after
或::after
,但在选择器模块 (3) 中声明后者现在旨在用于将它们与伪类区分开来
【讨论】:
规范说使用:
而不是::
来实现向后兼容性很好。它指出新的伪元素只能与 ::
一起使用,但旧的伪元素都支持。【参考方案2】:
您正在尝试引用相同的元素,因此您不需要复制 ID 选择器。也不需要使用子选择器,只需使用:
#myDiv:hover:after
display: block;
jsFiddle Demo
【讨论】:
以上是关于通过 CSS 将鼠标悬停在父元素上时显示 :after的主要内容,如果未能解决你的问题,请参考以下文章