JS实现鼠标悬停显示二级菜单简单代码 jQuery实现(DOM操作基本类似)

满脑子技术的前端工程师

已于 2023-01-29 21:29:56 修改

阅读量3.5k

点赞数 3

分类专栏： JavaScript 文章标签： js jquery css javascript html

于 2021-07-16 22:18:29 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/118827151

版权

JavaScript 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

JS实现鼠标悬停显示二级菜单简单代码 jQuery实现

- 实现图片(效果图) 代码在最下面

实现图片(效果图) 代码在最下面

在这里插入图片描述这是开始的一个标签---->鼠标移动到(div上弹出来下拉菜单)

在这里插入图片描述
就成功出现了

简单的代码如下(横向菜单以及竖向菜单,自己可以用table或者浮动解决问题):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            margin: 15px 15px;
            display: inline-block;
        }
        
        ul {
            display: none;
            list-style-type: none;
            cursor: pointer;
            padding: 0px;
            margin: 5px 0px;
        }
    </style>
</head>

<body>
    <div class="div1">div1
        <ul>
            <li>div2</li>
            <li>div3</li>
            <li>div4</li>
            <li>div5</li>
        </ul>
    </div>
</body>
<script src="../jQuery地址库/jQuery.js"></script>
<script>
    //获取类.div1节点 div;设置鼠标经过节点mouseover
    $('.div1').mouseover(function() {
        $('ul').css('display', 'block');

    });
    //获取类.div1节点 div;设置鼠标离开节点mouseout
    $('.div1').mouseout(function() {
        $('ul').css('display', 'none');
    })
</script>

</html>

满脑子技术的前端工程师

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现鼠标悬停显示二级菜单简单代码 jQuery实现(DOM操作基本类似)

JS实现鼠标悬停显示二级菜单简单代码 jQuery实现实现图片(效果图) 代码在最下面实现图片(效果图) 代码在最下面这是开始的一个标签---->鼠标移动到(div上弹出来下拉菜单)就成功出现了简单的代码如下(横向菜单以及竖向菜单,自己可以用table或者浮动解决问题):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http
复制链接

扫一扫