css横排菜单实现鼠标悬停更改样式

冷不防 2022-05-17 21:17 237阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>横排菜单实现鼠标悬停更改样式</title>
        <style type="text/css" rel="stylesheet">
            *{
                padding: 0px;
                margin: 0px;
            }
            .mainMenu{
                width: 100%;
                background-color: #ff4400;
                color: white;
                float: left;
                height: 30px;
                text-align: center;
                align-items: center;
            }
            .menu{
                float: left;
                line-height: 30px;
                font-size: 20px;
                margin-left: 10px;
                border:0px solid black ;
                border-radius: 8px;
                text-align: center;
            }
            .menu:hover{
                background-color:wheat;
                color: #ff4400;
            }
            #first{
                margin-left: 30%;
            }
    
        </style>
    </head>
    <body>
    <div class="mainMenu">
        <div class="menu" id="first">首页</div>
        <div class="menu">天猫</div>
        <div class="menu">聚划算</div>
        <div class="menu">天猫超市</div>
        <div class="menu">淘抢购</div>
        <div class="menu">司法拍卖</div>
        <div class="menu">中国制造</div>
    </div>
    </body>
    </html>

在这里，为了简化操作，菜单我用的<div>标签，实际开发中应该是<a>标签

效果：

![70][]

![70 1][]

[70]: /images/20220518/b95c7e18e73c4798855597b74d559f17.png
[70 1]: /images/20220518/c7c8e96d022941a98b564d685138d7ee.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css 实现鼠标悬停放大

.qr-code:hover { transform: scale(1.5); // 放大1.5倍 transition: a

迷南。/ 2023年10月06日 09:19/ 0 赞/ 33 阅读

相关 CSS 实现鼠标悬停上弹出二级菜单动画显示（二）

效果： ![20200908175021900.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

系统管理员/ 2023年10月05日 09:47/ 0 赞/ 14 阅读

相关 CSS 实现鼠标悬停上弹出二级菜单（一）

效果: ![20200908174323611.png][] HTML页面 <!DOCTYPE html> <html> <head>

桃扇骨/ 2023年10月05日 09:47/ 0 赞/ 18 阅读

相关 css实现鼠标悬停改变图片

样式： <style> .bshApp img:hover{ content:url('bshsjjscpdf/bsh_four_

桃扇骨/ 2023年10月03日 19:59/ 0 赞/ 59 阅读

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

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

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

相关修改鼠标悬停样式

一般我们在浏览网页的时候，我们的鼠标只有三种样式，分别为text(遇到文本内容时，I)，pointer(遇到超链接，手指形状),和default(没遇到实际内容

朱雀/ 2022年06月09日 02:55/ 0 赞/ 297 阅读

相关 CSS鼠标悬停

> 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享：先看效果 ![这里写图片描述][70] HTM

港控/mmm°/ 2022年05月25日 06:17/ 0 赞/ 358 阅读

相关 css横排菜单实现鼠标悬停更改样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年05月17日 21:17/ 0 赞/ 238 阅读

相关【ITEYE】css创建鼠标悬停下拉菜单样式

原文链接：[http://1175644344.iteye.com/blog/2331973][http_1175644344.iteye.com_blog_2331973]

灰太狼/ 2021年12月18日 07:39/ 0 赞/ 407 阅读

相关 css实现鼠标悬停效果

![在这里插入图片描述][20200527151344896.gif] 感觉css的话，原来的我认为很难学，挺生涩的，但是认真看了以后，感觉css很有意思，能写出很多好看的

浅浅的花香味﹌/ 2021年07月27日 01:57/ 0 赞/ 595 阅读