鼠标悬浮导航栏显示下拉菜单

布满荆棘的人生 2022-10-27 05:24 393阅读 0赞

**在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。**

## 1、原生js ##

<script>
            // window.onload = function(){ 
                // 获取需要悬浮的对象
                 let show = document.getElementById("businessarea");
                 // 获取被隐藏的菜单
                 let menu = document.getElementById("businessarea-menu");
    
                 // 给show添加鼠标悬停事件
                 show.onmouseover = function(){ 
                        menu.style.display = "block";
                   }
    
                  show.onmouseout = function(){ 
                        // 获取菜单栏的坐标值
                        let menux = menu.offsetLeft;
                        let menuy = menu.offsetTop;
                        let menuX = menu.offsetLeft + menu.offsetWidth;
                        let menuY = menu.offsetTop + menu.offsetHeight;
    
                         // 获取鼠标的坐标值
                         let event = window.event;
                         let mouseX = event.clientX;
                         let mouseY = event.clientY;
                         if(mouseX<menux || mouseX>menuX || mouseY<menuY || mouseY>menuY){ 
                           menu.style.display = "none";
                        }
                 }
                  menu.onmouseover = function(){ 
                       menu.style.display = "block";
                  }
                 menu.onmouseleave = function(){ 
                     menu.style.display = "none";
                }
              // }
     </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]  
**2、Jquery**  
**注意，要先引入jquery.js文件**

<script>
           $(document).ready(function (){ 
                 $('#newsarea-menu').hide(); //打开页面隐藏下拉列表
                 $('#newsarea').hover( //鼠标划过导航栏目时
                 function(){ 
                        $('#newsarea-menu').show(); //下拉列表显示
                   },
                 function(){ 
                       $('#newsarea-menu').hide(); //鼠标移开后下拉列表隐藏
                 }
            );
              $('#newsarea-menu').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表 
                   function(){ 
                         $('#newsarea-menu').show();
                     },
                    function(){ 
                         $('#newsarea-menu').show();
                      }
                  )
         })
     </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/b6f851e6ef9f4470ac7333ac9aedc3f7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，393人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 394 阅读

相关 html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单

个人信息维护学生信息修改修改密码\--%> 修改密码\--%> 修改密码--%> 退出登录用户：

傷城~/ 2022年10月05日 13:57/ 0 赞/ 335 阅读

相关 html下拉列表鼠标悬浮自动先出来,下拉菜单/下拉列表鼠标提示ToolTip【JQuery实现】...

本文介绍如何使用JQuery给下拉菜单/下拉列表增加鼠标提示(ToolTip)。 ![aa919629334475c7ce7dd6f9f0595d4b.gif][] 下拉列

电玩女神/ 2022年10月05日 13:00/ 0 赞/ 300 阅读

相关 DedeCMS导航下拉菜单

DedeCMS 导航下拉菜单是一个非常经典的js下拉菜单，有两个效果值得借用：淡入淡出效果。DedeCMS导航下拉菜单有轻微的淡入淡出效果，这是通过setTimeout()方

阳光穿透心脏的1/2处/ 2022年09月29日 05:29/ 0 赞/ 245 阅读

相关 jquerty鼠标移上显示隐藏菜单简洁下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

快来打我*/ 2022年09月26日 12:57/ 0 赞/ 213 阅读

相关 jquery简单菜单下拉导航

jquery简单菜单下拉导航代码如下：复制运行即可 <!doctype html> <html> <head> <meta c

爱被打了一巴掌/ 2022年07月15日 04:20/ 0 赞/ 278 阅读

相关实现导航栏下拉菜单列表页面

1.wxml页面代码：  < view class = "tabTit box tc bg\_f"> < view class = "fle

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 00:53/ 0 赞/ 347 阅读

相关导航下拉菜单效果

以下是首页包含的TOP.htm文件 <link href="js/menu\_style.css" rel="stylesheet" type="text/css" />

港控/mmm°/ 2021年12月20日 02:11/ 0 赞/ 377 阅读

相关 html+js制作侧边下拉导航栏菜单

有其他的方法可以一起交流学习n(\≧▽≦\)n 效果图：css样式自己设置哟 ![2019081317092342.png][]

你的名字/ 2021年10月23日 10:47/ 0 赞/ 803 阅读

相关鼠标悬浮菜单栏动画（vue版）

![在这里插入图片描述][20200506182037239.gif] 数据动态 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGV

我会带着你远行/ 2021年07月24日 20:18/ 0 赞/ 518 阅读