關於星星評分效果大家一定都不會陌生，當鼠標滑過的時候會使相應的星星變得高亮，下面就介紹一下如何利用CSS實現鼠標滑過五角星高亮效果，對此功能感興趣的朋友一起學習吧
關於星星評分效果大家一定都不會陌生，當鼠標滑過的時候會使相應的星星變得高亮，下面就介紹一下如何利用CSS實現此功能，當然並不是完整的評分功能，僅僅是如何使滑過的星星實現高亮效果。
代碼實例如下:
廢話不多說了，直接給大家貼代碼了。
復制代碼代碼如下:
<!DOCTYPE Html>
<Html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://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>
上面的代碼實現了我們的要求當鼠標滑過的時候能夠實現五角星高亮效果。 要實現此功能的朋友可以參考下本篇文章。