效果图:
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
height: 200px;
list-style:none;
display:flex;
justify-content:center;
/*实现子元素在父元素中绝对居中*/
align-items:center;
font-size: 60px;
border: 1px solid #000;
}
li{
width: 80px;
}
</style>
</head>
<body>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
var sx="★";
var kx="☆";
$("li").mouseenter(function(){
//鼠标移入是,让当移入的这个li以及他之前的所有li都变成实心星星,后边的所有都变成空心星星
$(this).text(sx).prevAll().text(sx).end().nextAll().text(kx);
});
$("li").click(function(){
//鼠标点击li的时候,给该li添加一个class=tag,移除其他所有兄弟的class
$(this).addClass("tag").siblings().removeClass("tag");
})
$("ul").mouseleave(function(){
//鼠标离开ul时候,让所有li都是空心,然后让有class=tag的这个Li前面的所有兄弟都是实心,后面的所有都是空心
$(this).children().text(kx);
$(".tag").text(sx).prevAll().text(sx).end().nextAll().text(kx);
})
</script>
</body>
</html>