css 设置鼠标覆盖显示菜单

最新推荐文章于 2024-07-06 14:50:23 发布
最新推荐文章于 2024-07-06 14:50:23 发布
阅读量1k 收藏 7
点赞数 9
分类专栏： vue 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44899752/article/details/135256237
版权

在这里插入图片描述
鼠标覆盖到“全部分类”效果如下
在这里插入图片描述
鼠标放到“精品推荐”效果如下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #main{
            width: 450px;
            height: 500px;
            background-color: antiquewhite;
            margin: 0 auto;
        }
        .nav{
            width: 100px;
            height: 30px;
            position: relative;
            display: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        /* 设置列表 */
        .nav_list{
            width: 180px;
            background-color: rgb(246, 248, 248);
            float: left;
            position: absolute;
            top: 0px;
            margin-left: 90px;
            display: none;

        }
        .nav_list ul li{
            list-style: none;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;

        }
        .nav:hover .nav_list{
            display: block;
        }
        .nav:hover{
            background-color: rgb(246, 248, 248);
        }
        #protect_list{
            width: 1180px;
            height:50px;
            background-color: azure;
        }
       

        #protect_list:hover .nav{
            display: block;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="protect_list">
            <h2>全部分类</h2>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>
java庞
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用mouseover()与mouseout()使鼠标覆盖后可以显示新的html元素
bobbyzyl12的博客
08-14 3315
很多时候我们在各类网站上都能看到鼠标移到某个位置上的时候会扩展出新的div或者其他html元素。这里一下实现这种效果的方法
css3扇形菜单鼠标悬停css3旋转动画扇形打开菜单代码
11-21
本主题聚焦于一个特别吸引人的设计元素——“css3扇形菜单”，它在鼠标悬停时通过css3旋转动画实现扇形展开，极大地提升了用户界面的互动性和美观度。下面将详细阐述这一技术的实现原理、关键CSS3属性以及应用方法。...
css控制元素不被覆盖,CSS元素伪不覆盖子元素样式
weixin_39681486的博客
08-04 483
所以我想要样式锚元素包含其他html元素。该基地的代码是：HTML：CSS元素伪不覆盖子元素样式titleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim自举类不打扰...
JavaScript第一课鼠标覆盖和移出
weixin_38505405的博客
09-24 1408
第一个Java效果文件 html> lang="en"> charset="UTF-8"> 第一个JavaScript效果 #div1{width:200px; height:100px; background:#ccc; border:1px solid #999; display:none} type="checkbox"/> id="div1"
利用position定位和hover实现鼠标滑过文字覆盖图片效果
baidu_33163851的博客
05-05 3572
鼠标覆盖出现文字
weixin_45646245的博客
10-09 527
一开始是一个空盒子，当鼠标放上后会以左下角为旋转点，逆时针转出文字 <!-- 一开始子盒子不可见，当鼠标放在父盒子上时，子盒子以左下角为旋转中心点转出来 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
css3实现鼠标悬停特效代码
码农研究僧的博客
11-16 2026
主要展示鼠标经过这个范围的时候，会有一个动画展示（半透明悬浮下来） 再不点击的情况下（文字后面是全覆盖不滚动的背景图）
css隐藏下拉菜单的设置，当鼠标放上去时，自动显示下拉菜单
热门推荐
skywordphp的博客
12-07 2万+
html部分：  ....      .....      .....     css部分: #a ul li{ display:none } #a ul li:hover li{ display:list-item; } 在li里写上内容，就能实现；
三种方法解决纯css下拉菜单鼠标移入菜单内容时菜单隐藏消失的问题
henry2k888的博客
04-24 8331
情景描述 假设我们希望导航栏上有一个元素（以下简称“菜单标题”），把鼠标移到标题上面时其下方会弹出一列菜单，鼠标离开时菜带又隐藏起来。 然而，当试图把鼠标从菜单标题移到菜单内容中时，菜单竟然也隐藏了。 我的菜单内容（平时隐藏的那一部分）是由一个 <ul> 充当的。 html <html> <head> <title>test1</titl...
CSS-下拉菜单被覆盖
07-28 6942
问题：做了个网站的导航栏带有下拉菜单，鼠标放在导航栏上就会显示下拉菜单，现在下拉菜单被覆盖了。解决：设置当前的div的style属性，新增position和z-index<div class="box" style="position:relative; z-index:9999;">原因：Z-INDEX是设置不同块的层次的 position 属性规定元素的定位类型。
CSS3悬停展开旋转菜单特效
06-24
2. **CSS样式**：为菜单项添加基础样式，包括颜色、大小、位置等，并设置`:hover`状态下的样式，触发过渡和变换。 3. **动画配置**：定义过渡效果的持续时间和变换方式，例如`transition: all 0.3s ease;`表示所有...
纯css实现固定在网页底部菜单导航
06-05
同时，通常还需要设置`width`以覆盖整个屏幕宽度，例如`width: 100%`，确保导航栏横跨整个浏览器窗口。如果希望导航栏在垂直方向上也有一定的高度，可以设置`height`属性。 在CSS中，我们还需要考虑响应式设计，...
纯CSS黑色固定导航菜单代码
04-09
默认情况下，子菜单是隐藏的（`display: none`），当鼠标悬停在父菜单项上时，通过改变`display`值（如`display: block`）显示子菜单。此外，还需使用`z-index`来管理不同元素的堆叠顺序，确保下拉菜单能正确覆盖...
jQuery右侧弹出全屏覆盖菜单
04-06
总结来说，"jQuery右侧弹出全屏覆盖菜单"是一种利用jQuery、HTML5和CSS技术实现的交互设计，旨在提供一种优雅的方式来展示全屏菜单。它依赖于jQuery的事件处理和DOM操作，HTML5的语义化元素，以及CSS的布局和动画...
使用css做一个旋转的八卦图
weixin_40923558的博客
07-02 348
【代码】使用css做一个旋转的八卦图。
CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
最新发布
朝阳39的博客
07-06 688
idCSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。
Tailwind CSS是什么？
学以致用 知行合一
07-04 348
定义：Tailwind CSS是一个高度可定制的低级CSS实用程序类集合，用PostCSS编写，旨在通过JavaScript进行定制。它提供了一系列基础工具类，允许开发者通过组合这些工具类来快速构建页面和UI。起源：Tailwind CSS最初由Adam Wathan等人于2017年11月1日在GitHub上作为开源项目发布。随着时间的推移，它逐渐成长为一个成熟且流行的CSS框架。
使用css，让div消失在视野中的方法
博哥的二进制世界
07-03 293
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
css 如何设置鼠标点击后显示高亮
05-25
可以使用 CSS 的 `:active` 伪类来设置鼠标点击后显示高亮，示例代码如下： ```css a:active { background-color: yellow; } ``` 上面的代码会在鼠标点击链接时，将链接的背景色设置为黄色。你也可以根据需要将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java庞

你的鼓励就是我们最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值