效果图:
源代码:
<!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>
如果觉得《jQuery+flex(简单实用)简单实现淘宝京东五星好评(附注释)》对你有帮助，请点赞、收藏，并留下你的观点哦！
