红粒炊畲粟，青烟郁涧薪。得床思熟睡，寒犬苦狺狺。一生之中至少要有两次冲动，一次为奋不顾身的爱情，一次为说走就走的旅行。
关于星星评分效果大家一定都不会陌生，当鼠标滑过的时候会使相应的星星变得高亮，下面就介绍一下如何利用css实现此功能，当然并不是完整的评分功能，仅仅是如何使滑过的星星实现高亮效果。 代码实例如下:
废话不多说了，直接给大家贴代码了。
复制代码
代码如下:<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.haodaima.com/" />
<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>
上面的代码实现了我们的要求当鼠标滑过的时候能够实现五角星高亮效果。 要实现此功能的朋友可以参考下本篇文章。
到此这篇关于css如何实现鼠标滑过五角星高亮效果就介绍到这了。调节好兴奋期，学习一浪高一浪。更多相关css如何实现鼠标滑过五角星高亮效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
![]("./images/paella-dish.jpg)