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

: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中文网其他相关文章！