鼠标移入方块变颜色

学会抛开过去
449 阅读1分钟

css样式

<style>
      * {
        padding: 0;
        margin: 0;
      }
      ul {
        width: 400px;
        height: 400px;
        list-style: none;
        border: 2px solid #000;
        margin: 50px auto;
      }
      li {
        box-sizing: border-box;
        float: left;
        width: 20px;
        height: 20px;
      }
    </style>

html

<ul>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
      <li data-img="0"></li>
    </ul>

javascript代码

var ul = document.getElementsByTagName("ul")[0];
ul.onmouseover = function (e) {
 var event = e || window.event;
 var target = event.target || event.srcElement;
 target.style.backgroundColor =
   "rgb(1, 255," + target.getAttribute("data-img") + ")";
   target.setAttribute(
    "data-img",
   parseInt(target.getAttribute("data-img")) + 20
 );
};

总结：当鼠标移入的时候每移动到一个小块上他的背景颜色一层一层的改变， 从rgb(1, 255, 0);最终rgb(1, 255, 255);从而达到颜色的变化。

avatar
文章
阅读
粉丝