CSS案例:京东-加油卡部分 作者:马育民 • 2023-05-20 10:41 • 阅读:10015 # 案例 显示效果如下: [![](/upload/0/0/1IX5Wz268OFt.jpg)](/upload/0/0/1IX5Wz268OFt.jpg) 鼠标滑过,文字变红,图标也改变,如下图: [![](/upload/0/0/1IX5Wz39JBQ3.jpg)](/upload/0/0/1IX5Wz39JBQ3.jpg) ### html ``` 加油卡 电影票 云建站 ``` ### css ``` *{ padding: 0; margin: 0; } .service_list{ list-style: none; } .service_list li{ float: left; width: 63px; height: 55px; text-align: center; margin-top: 10px; } .service_list img{ width: 28px; height: 28px; } .service_list p{ height: 25px; line-height: 25px; } .service_list a{ color: #333; text-decoration: none; } .service_list a:hover{ color: #c81623; } .service_list a:hover .service_ico_img{ display: none; } .service_list a:hover .service_ico_img_hover{ display: inline-block; } .service_list .service_ico_img_hover{ display: none; } ``` 原文出处:http://malaoshi.top/show_1IX5Wz3ckcm7.html