css实现鼠标滑过五角星高亮效果

ttx9n · 发表于 2016-1-20 16:14:32

关于星星评分效果大家一定都不会陌生，当鼠标滑过的时候会使相应的星星变得高亮，下面就介绍一下如何利用css实现鼠标滑过五角星高亮效果，对此功能感兴趣的朋友一起学习吧关于星星评分效果大家一定都不会陌生，当鼠标滑过的时候会使相应的星星变得高亮，下面就介绍一下如何利用css实现此功能，当然并不是完整的评分功能，仅仅是如何使滑过的星星实现高亮效果。
代码实例如下:
废话不多说了，直接给大家贴代码了。

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
span{
display:block;
width:30px;
height:30px;
padding-left:30px;
background-image:url(mytest/demo/star.gif);
background-repeat:no-repeat;
background-position:0 -3px;
}
span span span span span{
padding-left:0;
}
span:hover{
background-position:0 -31px;
}
</style>
</head>
<body>









</body>
</html>

上面的代码实现了我们的要求当鼠标滑过的时候能够实现五角星高亮效果。要实现此功能的朋友可以参考下本篇文章。

u7yxn9 · 发表于 2022-9-15 23:33:25

天天源码社区。。。。

j__j33p · 发表于 2022-9-19 20:31:00

hi哦和烦恼农家女

9jduu05 · 发表于 2022-11-15 10:37:00

有什么好的服务器

w18pvaep · 发表于 2023-4-9 13:49:36

看看看看

u6h2m4 · 发表于 2023-8-21 12:37:39

的沙发水电费水电费

i1efp6c · 发表于 2023-9-3 01:18:38

谢谢下载来看看

qwe520 · 发表于 2023-10-23 13:25:24

可以，看卡巴

wqpa63gz · 发表于 2024-3-2 01:32:00

天天源码论坛

qq303604905 · 发表于 2024-4-7 01:19:46

问问问企鹅哇哇哇哇哇

账号		自动登录	找回密码
密码			立即注册

[CSS] css实现鼠标滑过五角星高亮效果

相关帖子