首页 > web前端 > css教程 > 如何将 :hover 样式应用于 :before 和 :after 伪元素?

如何将 :hover 样式应用于 :before 和 :after 伪元素?

Barbara Streisand
发布: 2024-12-17 14:29:15
原创
807 人浏览过

How to Apply :hover Styles to :before and :after Pseudo-elements?

:hover :before 和 :after 元素的条件

问题

您在将“:hover”应用于“:before”时遇到困难元素。尝试使用“:before:hover”已被证明是无效的。

说明

根据父元素的“:hover”状态将样式应用于“:before”元素的正确语法是:hover:before 或 a:visited:before。伪元素附加在选择器末尾、伪类之后。

在 CSS3 中,您可以通过使用双冒号 (::) 来表示伪元素来澄清这种区别。因此,正确的语法为 a:hover::before 和 a:visited::before。但是,对于 IE8 等旧版浏览器,单冒号仍然可以接受。

此语法由 CSS 规范规定,该规范规定伪元素必须附加到简单选择器的最终序列中。

限制

请注意,如果您打算单独应用该效果,则上述方法可能不适合像“:hover”这样的用户操作伪类当与伪元素本身交互时。目前通过标准 CSS 机制这是不可能的。在这种情况下,您可能需要使用实际的子元素而不是伪元素来应用“:hover”。

以上是如何将 :hover 样式应用于 :before 和 :after 伪元素?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板