鼠标悬停时显示的效果

最新推荐文章于 2024-05-14 20:02:25 发布

达达学前端

最新推荐文章于 2024-05-14 20:02:25 发布

阅读量201

点赞数

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

本文链接：https://blog.csdn.net/m0_55965566/article/details/125367801

版权

css 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

<!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>导航1.0</title>
    <style>
        .nav li{float: left;list-style-type: none;}
        .nav li a{text-decoration: none;color: #fff;width: 100px;height: 35px;
            border: 1px solid #ddd;text-align: center;line-height: 35px;
        background: teal;display: block;}
        /* 鼠标悬停时显示的效果 */
        .nav li a:hover{color: yellow;background: tomato;}
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="##">首页</a></li>
        <li><a href="##">首页</a></li>
        <li><a href="##">首页</a></li>
        <li><a href="##">首页</a></li>
        <li><a href="##">首页</a></li>
    </ul>
</body>
</html>

鼠标移入前效果图