要给一个伪元素添加悬停效果,可以使用pointer-events: none;
样式属性来禁止伪元素的点击事件,并使用:hover
伪类选择器来定义悬停效果。
下面是一个示例代码:
Hover over me
在上述代码中,我们创建了一个容器元素.container
,并在其上面使用::before
伪元素来创建一个不可点击但可悬停的元素。通过设置pointer-events: none;
样式属性,我们禁止了伪元素的点击事件。
然后,使用.container:hover::before
选择器来定义悬停时的效果,例如改变背景颜色为红色。
当你将鼠标悬停在容器上方时,伪元素的背景颜色将变为红色。
下一篇:不可点击的按钮