如何为 CSS 中的伪元素添加悬停效果？

伪元素的悬停效果

问题：向伪元素添加悬停效果

在 HTML 和 CSS 中使用伪元素时，通常需要添加悬停效果以增强用户交互性。然而，直接为伪元素创建悬停效果可能具有挑战性。

解决方案：通过父元素实现悬停效果

您可以通过定位父元素来实现伪元素的悬停效果。操作方法如下：

在此代码中，#button:before 定义伪元素的初始样式，而 #button:hover:before 指定悬停效果样式。当父元素（#button）悬停时，悬停效果将应用于伪元素。

示例代码

考虑以下 HTML 设置：

以及相应的CSS：

此代码将在其文本之前显示一个带有蓝色方块的按钮。当您将鼠标悬停在按钮上时，方块会变成红色。

以上是如何为 CSS 中的伪元素添加悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！