通过 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的主要内容,如果未能解决你的问题,请参考以下文章

HTML/CSS - 将鼠标悬停在照片上时显示链接

如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上?

CSS - 将鼠标悬停在 li 元素上时执行转换(下拉菜单)

jQuery CSS 悬停

当鼠标悬停在没有css的标题上时,如何使缩略图消失?

将鼠标悬停在图像上时需要 CSS 效果,以获取另一个图像和/或文本以显示在其上方