会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133501个问题
WEB前端全系列/第五阶段:前后端交互/网络请求AJAX 9781楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/面向对象详解和JVM底层内存分析 9783楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编写一个带有hover样式的导航栏,要求采用鼠标事件实现</title>
</head>
<body>
    <script>
        var arr = ["首页","军事","新闻","我们"];
        var ul = document.createElement('ul');
        var ul_style = document.createAttribute('style');
        ul_style.value="list-style: none;margin: 0px;padding: 0px;";
        ul.setAttributeNode(ul_style);
        for (var i = 0;i<arr.length;i++){
            var li = document.createElement("li");
            var li_style = document.createAttribute("style");
            li_style.value="display: block;float: left;width: 150px;height: 50px;" +
                "line-height: 50px;text-align: center;background:pink;margin-left:100px;";
            li.setAttributeNode(li_style);
            var a = document.createElement("a");
            var a_style = document.createAttribute("style");
            a_style.value="text-decoration: none;";
            a.setAttributeNode(a_style);
            a.innerHTML=arr[i];
            li.appendChild(a);
            ul.appendChild(li);
        }
        document.body.appendChild(ul);
        
        //li事件
        var li = document.querySelector('li');
        li.onmouseover = function () {
            li.style.background='yellow';
        };
        li.onmouseout = function () {
            li.style.background="pink";
        };
        
        //超链接事件
        var a = document.querySelector('a');
        a.onmouseover = function () {
            a.style.color="white";
        };
        a.onmouseleave = function () {
            a.style.color="#ccc";
        };
    </script>
</body>
</html>

老师,你好,请问一下怎么设置属性能让每个li元素都有鼠标事件,我这样设置的只有第一个li产生了鼠标事件?

image.png

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 9784楼
JAVA 全系列/第六阶段:JavaWeb开发/Servlet技术详解 9785楼
Python 全系列/第十一阶段:重量级Web框架-Django/Redis的入门与应用(拓展) 9786楼
Python 全系列/第二阶段:Python 深入与提高/模块 9787楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 9788楼
WEB前端全系列/第五阶段:前后端交互/PHP、数据库编程与设计 9789楼

飞机大战.zip

老师我一行行对代码看了,还是在爆炸效果这里报错出不来

JAVA 全系列/第一阶段:AI驱动的JAVA编程/飞机大战小项目训练 9790楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/网络编程(旧) 9794楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637