037-Web前端-JS-样例：导航栏

最新推荐文章于 2024-03-22 23:43:25 发布

我的肚肚有点儿疼

最新推荐文章于 2024-03-22 23:43:25 发布

阅读量172

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Fenfen_vyron/article/details/106841858

版权

Web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

#6.18
本节仍为鼠标事件的样例——实现css中hover变色类型的导航栏
具体理论相关标注在代码中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>带有hover样式的导航栏</title>
</head>
<body>
<script>
    var ul=document.createElement('ul');    //大框架：创建ul元素
    ul.style.listStyle='none';                  //去掉ul样式
    ul.style.padding='0';                       //内边距置0

    var titleArr=['首页','军事','娱乐','新闻'];     //创建数组

    for(var i=0;i<titleArr.length;i++){    //for循环创建li
      var li = document.createElement('li');    //创建li
        li.style.cssText='width:80px;height:30px;line-height:30px;text-align:center;' +
                'background-color:skyblue;display:inline-block';    //li的样式/cssText写法
        li.innerHTML=titleArr[i];   //给对应序号的li赋值
        ul.appendChild(li);         //将li附在ul上
        li.onmouseenter=function(){     //鼠标移入触发 不冒泡
            //this在函数中使用，表示谁调用函数，它就是谁
            //如果这里this是li的话，由于for循环执行速度过快，执行的li永远是最后一个
            //也就是永远是最后一个变色
            this.style.backgroundColor='orange';    //相当于hover变色
        }
        li.onmouseleave=function(){     //鼠标移出触发 不冒泡
            this.style.backgroundColor='skyblue';       //变回skyblue
        }
    }

    document.body.appendChild(ul);      //大框架：附着在网页body中
</script>
</body>
</html>

我的肚肚有点儿疼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
037-Web前端-JS-样例：导航栏

#6.18本节仍为鼠标事件的样例——实现css中hover变色类型的导航栏具体理论相关标注在代码中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>带有hover样式的导航栏</title></head><body><script> var ul=document.creat
复制链接

扫一扫