css实现鼠标滑过五角星高亮效果
发布时间：2016-01-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>
<span>
<span>
<span>
<span>
<span></span>
</span>
</span>
</span>
</span>
</body>
</html>
上面的代码实现了我们的要求当鼠标滑过的时候能够实现五角星高亮效果。 要实现此功能的朋友可以参考下本篇文章。
代码实例如下:
废话不多说了，直接给大家贴代码了。
复制代码
代码如下:<!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>
<span>
<span>
<span>
<span>
<span></span>
</span>
</span>
</span>
</span>
</body>
</html>
上面的代码实现了我们的要求当鼠标滑过的时候能够实现五角星高亮效果。 要实现此功能的朋友可以参考下本篇文章。
相关文章
这篇文章主要介绍了纯CSS3实现鼠标滑过按钮动画第二节,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-16- 本文给大家分享css代码实现鼠标滑过鼠标点击的写法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2016-12-26
- 这篇文章主要为大家详细介绍了CSS3制作炫酷带方向感应的鼠标滑过图片3D动画，具有一定的参考价值，并兼容目前最新的各类主流浏览器，感兴趣的小伙伴们可以参考一下2016-03-16
- 这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下2016-03-16
- 这篇文章主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参2015-09-14
- 鼠标滑过文字弹出一段说明文字CSS实现，无JS代码，下面代码直接拷贝了就可用2014-05-20
- 弹出层想必大家都有见到过吧，在以前或许是使用js实现的，不过现在我们可以使用纯css来实现了，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-16
- 鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现，感兴趣的朋友，不要错过2013-10-12
- 鼠标滑过改变文字的效果想必很多朋友都有遇到过吧，本文为大家介绍下css是如何实现的，感兴趣的朋友可以了解下2013-09-09
这篇文章主要介绍了使用css的filter写鼠标滑过效果的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-08-13
最新评论