滑过哪里，哪块变色，滑的越多，颜色越浅
当没有边线的时候，效果越好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
/* 把每个li整个的宽高设成10px，不再是12px了 */
box-sizing: border-box;
width: 10px;
height: 10px;
/* border: 1px solid black; */
float: left;
}
ul{
list-style: none;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
滑过哪里，哪块变色，滑的越多，颜色越浅
<ul>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
<li img-date="0"></li>
</ul>
<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0];
ul.onmouseover = function(e){
//绑定每一个li
var event = e || window.event;
var target = event.target || event.srcElement;
target.style.backgroundColor = "rgb(0,255,"+ target.getAttribute('img-date') +")";
target.setAttribute('img-date',parseInt(target.getAttribute('img-date')) + 10);
}//鼠标滑过的时候怎么样
</script>
</body>
</html>