dom_31 鼠标移动，高亮显示列表美女

作者: basicGeek | 来源:发表于2018-11-23 11:41 被阅读0次

dom_31 鼠标移动，高亮显示列表美女
vim 配置
JS案例12-高级隔行变色
可视化分析
表格合并
jQuery突出展示案例
Bootstrap 表格 .table-hover 颜色自定义
微信小程序实现某个关键字高亮显示
鼠标移动显示手势
js 放大镜效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button>创建列表</button>
    <ul></ul>

    <script>
        //需求：点击列表，添加四大美女，然后鼠标放到谁上面，谁高亮显示。
        //思路：创建一个数组，添加内容。利用for循环穿件li标签在添加内容，高亮显示。
        //步骤：（指定多少个元素的创建最好用for循环）
        //老三步
        var btn = document.getElementsByTagName("button")[0];
        //获取相关元素并定义内容
        var arr = ["昭君出塞","西施浣纱","贵妃醉酒","貂蝉拜月"];
        var ul = document.getElementsByTagName("ul")[0];
        btn.onclick = function () {
//            ul.innerHTML = "";
            for(var i=0;i<arr.length;i++){
                //创建li元素
                var newLi = document.createElement("li");
               newLi.innerHTML += "<li>"+arr[i]+"</li>";
                //添加到ul中
                ul.appendChild(newLi);
            }
            //获取所有的li标签然后，为他绑定事件，排他思想，高亮显示
            var liArr = ul.children;
            //为所有的li绑定事件
            for(var i=0;i<liArr.length;i++){
                liArr[i].onmouseover = function () {
                    //排他思想，高亮显示
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].style.backgroundColor = "";
                    }
                    this.style.backgroundColor = "red";
                }
            }
        }


    </script>


</body>
</html>

鼠标移动高亮