JQuery实现打星星(五星好评)功能
实现效果:鼠标移上去某个星星,他和他前面所有的星星变红,离开全变黑。如果在上边点了某个星星在离开,就会保持
emmmmmm还挺有意思
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <%@include file="commons/basePath.jsp" %> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/createXHR.js"></script> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <style> #hoshi li{ font-size:50px; float: left; cursor: pointer; list-style-type:none; } </style> <script type="text/javascript"> $(function(){ var flag = true; $("#hoshi li").mouseover(function(){ $(this).nextAll().css("color","black").end().prevAll().addBack().css("color","red"); }).mouseout(function(){ if(flag){ $(this).siblings().addBack().css("color","black"); }else{ flag =true; } }).click(function(){ flag = false; }) }); </script> <title>首页</title> </head> <body> <div> <ul id="hoshi"> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> </ul> </div> <div style="clear:both;"></div> </body> </html>