star

最新推荐文章于 2024-10-30 19:10:39 发布

前端小新wxb

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量246

点赞数

本文链接：https://blog.csdn.net/Jaxson22/article/details/110875274

版权

ul {
    padding-left: 0;
    overflow: hidden;
}
ul li {
    float: left;
    list-style: none;
    width: 27px;
    height: 27px;
    background: url(star.gif)
}
ul li a {
    display: block;
    width: 100%;
    padding-top: 27px;
    overflow: hidden;
}
ul li.light {
    background-position: 0 -29px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	</head>
	   <body>
	   	   <ul class="comment">
			   <li class="light"></li>
			   <li></li>
			   <li></li>
			   <li></li>
			   <li></li>
		   </ul>
		   <script type="text/javascript">
		   	   $('.comment>li').mouseover(function(){
				   $(this).addClass('light').prevAll('li').addClass('light');
				   $(this).nextAll('li').removeClass('light');
			   });
			   $('.comment>li').click(function(){
				   $(this).attr('light','on').siblings('li').removeAttr('light');
			   });
			   $('.comment>li').mouseout(function(){
				   $('.comment>li').find('li').removeClass('light');
				   $('.comment>li[light=on]').addClass('light').prevAll('li').addClass('light');
			   });
		   </script>
	   </body>
</html>