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

最新推荐文章于 2024-04-23 16:55:33 发布

骑猪下不来的猴

最新推荐文章于 2024-04-23 16:55:33 发布

阅读量1.5k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_42529699/article/details/81287013

版权

css 专栏收录该内容

4 篇文章 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>标签

效果：

骑猪下不来的猴

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css横排菜单实现鼠标悬停更改样式

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;横排菜单实现鼠标悬停更改样式&lt;/title&gt; &lt;style type="text/css" rel=&q
复制链接

扫一扫