Html+Css+Js五星好评（完整代码+详解）

一，问题描述

当鼠标滑过空白的五颗星星时，有预览的颜色填充，当点击鼠标后，颜色填充确定，确定的颜色是绿色，当鼠标预览时，依然有预览色，没有点击鼠标确定时，颜色依然是，上一次的记录，点击了则是当次的好评记录，并且点击后，会有提示框弹出提示。

二，效果预览

三，用到的主要事件

onclick：点击事件
window.onload：页面加载事件

四，遇到的问题

鼠标从左往右可以看到与蓝色正常显示，但是鼠标从右往左就一直是五颗星填充的预览色。
原因：涉及到层级关系，从左往右正好星星的数量是从少到多，遮挡了前面的，从右往左是从多到少，一开始就遮挡了少的，就无法显示少的情况，就一直显示五颗预览色。
解决办法：每当移动到当前的星星时，就设置属性z-index=5；将当前的层级降低，就不会遮挡了。

五，完整代码

代码结构
Html代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><link rel="stylesheet" type="text/css" href="../css/start.css"/><script type="text/javascript" src="../js/start.js" ></script><body> <ul class="nav  " id="nav"><li class="onestart"><a href="#" title="1分">1分</a></li><li class="twostart"><a href="#" title="2分">2分</a></li><li class="threestart"><a href="#" title="3分">3分</a></li><li class="fourstart"><a href="#" title="4分">4分</a></li><li class="fivestart"><a href="#" title="5分">5分</a></li></ul></body>
</html>

Css代码

*{padding: 0px;margin: 0px;
}
body{height: 600px;width: 400px;border: 1px solid blue;margin: 0 auto;text-align: center;
}.nav{height: 16px;width: 80px;margin: 20px auto;background: url(../images/star-matrix.gif) no-repeat;/*text-align: center;*/position: relative;
}.onestart{background-position: 0px -16px;
}
.twostart{background-position: 0px -32px;
}
.threestart{background-position: 0px -48px;
}.fourstart{background-position: 0px -64px;
}.fivestart{background-position: 0px -80px;
}.nav li{height: 16px;width: 16px;list-style: none;float: left;
}
.nav li a{height: 16px;width: 16px;position: absolute;text-decoration: none;display: inline-block;text-indent: -99999px;z-index: 10;
}
.nav li a:hover{left: 0px;width: 80px;z-index: 7;background: url(../images/star-matrix.gif) no-repeat;/*background-color: gray;*/
}.nav .onestart  a:hover{background-position: 0px -96px;
}
.nav .twostart  a:hover{background-position: 0px -112px;
}
.nav .threestart  a:hover{background-position: 0px -128px;
}
.nav .fourstart  a:hover{background-position: 0px -144px;
}
.nav .fivestart  a:hover{background-position: 0px -160px;
}

JS代码

window.onload=function(){oUl=document.getElementById("nav");lis=oUl.getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {lis[i].onclick=function(){oUl.className="nav  "+this.className;console.log(oUl.className);var score=this.getElementsByTagName("a")[0].title;alert("评分是："+score);}}
}

六，效果展示

Html+Css+Js五星好评（完整代码+详解）相关推荐

html语言中表格由什么组成,html表格基本结构是什么？html表格的完整代码详解
表格在网页制作中用的很多,很多网站都是要求教程有很多大量的表格,表格的使用不仅让数据更加清楚,而且会让表格比较美观.那么html表格基本结构是什么?下面我们对html表格的完整代码进行详解.[推荐阅读 ...
基于spring security实现vue2前后端分离的双token刷新机制（完整代码详解，含金量拉满！）
目录一.前言: 核心功能概要: 通过加密算法创建一个用户: 二.后端代码详解: 1.代码整体结构: 2.所需依赖: 3.UserDetailServiceImpl拦截用户登陆: 4.所需工具类 4 ...
小程序获取用户所在城市完整代码详解（附源码）
小程序目录结构插入提示: 1. 申请开发者密钥(key): 申请密钥 2. 下载微信小程序JavaScriptSDK,下载地址下载完成后放入utils文件夹下引用即可 3. 安 ...
图书馆管理系统代码源码（php+css+js+mysql）完整的代码源码
图书馆管理系统代码源码(php+css+js+mysql) 完整的代码源码,系统使用B/S架构. 优化过的界面,拥有管理员和普通用户,普通用户可注册登录,管理员可登录,功能齐全. 管理员可管理普通用户 ...
会议室预定系统代码源码（php+css+js+mysql）完整的代码源码
会议室预定系统代码源码(php+css+js+mysql) 完整的代码源码,系统使用B/S架构. 优化过的界面,由管理员进行预定会议室操作. 推荐使用phpstudy+ navicat搭建和管理项目! ...
php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
js 浅拷贝直接赋值_JS中实现浅拷贝和深拷贝的代码详解
(一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值和引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...

Html+Css+Js五星好评（完整代码+详解）

一，问题描述

二，效果预览

三，用到的主要事件

四，遇到的问题

五，完整代码

六，效果展示

Html+Css+Js五星好评（完整代码+详解）相关推荐

最新文章

热门文章