javascript - 还是有关鼠标移入移出的问题，欢迎热心的朋友帮我看看哪出问题了-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 还是有关鼠标移入移出的问题，欢迎热心的朋友帮我看看哪出问题了

PHP中文网 2017-04-10 17:07:47

[JavaScript讨论组]

710

布局看成上下两个盒子，鼠标移入上面的盒子，下面的盒子就显示。只有鼠标移出下面的盒子时，下面的盒子display才为none，鼠标移入移出不是针对同一个事物，但我鼠标移出上面的盒子，下面的盒子就消失了，都还来不及在下面的盒子选选项。请问，我是思路不对还是语法错了？

PHP中文网

认证高级PHP讲师

全部回复(2)

巴扎黑2017-04-10 17:09:47 2楼

我还手撸的。。原生选择器毕竟太难受，不爱用~~~

// 顶部菜单 mouseover mouseout 
document.querySelector('.nav_item').addEventListener(
    'mouseover', function(){
      document.querySelector('#nav p').style.display = 'block';
    }
, false)

document.querySelector('.nav_item').addEventListener(
    'mouseout', function(){
      document.querySelector('#nav p').style.display = 'none';
    }
, false)

//子菜单 显示/隐藏
document.querySelector('#nav p').addEventListener(
    'mouseover', function(){
      document.querySelector('#nav p').style.display = 'block';
    }
, false)

document.querySelector('#nav p').addEventListener(
    'mouseout', function(){
      document.querySelector('#nav p').style.display = 'none';
    }
, false)

添了两段，和lz的意思一样， lz的代码问题是少了两段~~

 var nav = document.getElementById("nav");
            var navItem = nav.getElementsByTagName("li")[0];
            var op = nav.getElementsByTagName("p")[0];
            var oUl = nav.getElementsByTagName("ul")[0];
            var arrLi = oUl.getElementsByTagName("li");
            var len = arrLi.length;

            navItem.onmouseover = function () {
                op.style.display = "block";
            }
            //add  顶部菜单移出 隐藏
            navItem.onmouseout = function () {
                op.style.display = "none";
            }

            for(var i=0;i<len;i++){
                arrLi[i].onmouseover = function () {
                    this.style.backgroundColor = "#ccc";
                }
                arrLi[i].onmouseout = function () {
                    this.style.backgroundColor = "#fff";
                }
            }
            
            //子菜单 hover状态下 继续显示
            op.onmouseover = function () {
                op.style.display = "block";
            }
            op.onmouseout = function () {
                op.style.display = "none";
            }

赞 +0

添加回复

伊谢尔伦2017-04-10 17:09:47 1楼

首先楼主下面这段可以用css的伪元素：hover代替

for(var i=0;i<len;i++){
                arrLi[i].onmouseover = function () {
                    this.style.backgroundColor = "#ccc";
                }
                arrLi[i].onmouseout = function () {
                    this.style.backgroundColor = "#fff";
                }
            }

其次你的问题这样就达到你的目的

<script>
        window.onload = function () {
            var nav = document.getElementById("nav");
            var navItem = nav.getElementsByClassName("nav_item")[0];
            var op = nav.getElementsByTagName("p")[0];
            var oUl = nav.getElementsByTagName("ul")[0];
            var arrLi = oUl.getElementsByTagName("li");
            var len = arrLi.length;

            navItem.onmouseover = function () {
                op.style.display = "block";
            }


            for(var i=0;i<len;i++){
                arrLi[i].onmouseover = function () {
                    this.style.backgroundColor = "#ccc";
                }
                arrLi[i].onmouseout = function () {
                    this.style.backgroundColor = "#fff";
                }
            }

            op.onmouseover = function () {
                op.style.display = "block";
            }

            op.onmouseout = function () {
                op.style.display = "none";
            }
        }
    </script>

你还可以参考我以前的实现

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>