::before / ::after怎么使用hover

最新推荐文章于 2023-11-30 11:46:10 发布

前端渣渣

最新推荐文章于 2023-11-30 11:46:10 发布

阅读量1.7w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/wmx_boke/article/details/80735320

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用CSS的伪元素:before来实现鼠标悬停时图标的变化效果。通过设置不同的:hover状态，可以在用户交互时改变图标的样式，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪类是不支持hover的，但是，可以给div加hover。
其实就是 div:hover:before{
…代码
}
这样写的意思是div hover状态下的before怎样怎样

代码展示为

table{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}
th{
color:#333;
font-size:1.4em;
cursor:pointer;
background:#f0f0f0;
border:1px solid #bfbfbf;
}
.title_th::before{
content:”“;
display:inline-block;
background-size:100% 100%;
width:13px;
height:13px;
margin-right:0.5%;
background-image:url(../material/title_ico01.png);
}
.title_th:hover{
color:#f00;
}
.title_th:hover:before{
content:”“;
display:inline-block;
background-size:100% 100%;
width:12px;
height:13px;
margin-right:0.5%;
background-image:url(../material/title_ico02.png);
}
td{
font-family:”黑体”;
font-size:1em;
color:#333;
text-align:center;
border-bottom:1px solid #bfbfbf;
}