<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
color:red;
//设置字体大小，也可以清除li是inline-block的时候li之间间距
/*font-size: 0;*/
//设置字符间距可以清除li是inline-block的时候li之间的间距
/*letter-spacing: -3px;*/
//设置单词间距
/*word-spacing:-3px;*/
}
li {
float: left;
font-size:40px;
display: inline-block;
}
style>
<script src="jquery-1.11.1.min.js">script>
<script>
$(function () {
var wjx_sel = "★",wjx_none="☆";
$("ul").on("mouseenter","li", function () {
$(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
}).on("click","li", function () {
$(this).addClass("clicked").siblings().removeClass("clicked");
}).on("mouseleave", function () {
$("li").text(wjx_none);
$(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
});
});
script>
head>
<body>
<ul>
<li>☆li>
<li>☆li>
<li>☆li>
<li>☆li>
<li>☆li>
ul>
body>
html>
