HTML---鼠标悬停导航栏变颜色

使用两种方法，实现鼠标滑过导航栏变换颜色方法一：将<a>标签强制转换标签类型为块元素，然后设置：hover样式(鼠标滑过样式)方法二：给<li>标签设置：hover样式(鼠标滑过样式)

柠檬味的融融521

30209人浏览 · 2022-04-06 17:51:35

柠檬味的融融521 · 2022-04-06 17:51:35 发布

导航栏点击可以跳转到对应链接，实现鼠标滑过每个模块变换颜色的效果有如下方法。

方法一：将<a>标签强制转换标签类型为块元素，然后设置：hover样式(鼠标滑过样式)

css样式：
<head>   
  <style>
        /* 清除自带间距 */
        *{
            padding: 0;
            margin: 0;
        }
       /* 清除列表自带列表符号 */
        ul{
            list-style: none;
        }
        li{
            float: left;
            background-color: black;
        }
        a{
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            /* 强制转换a标签为块元素 */
            display: block;
            color: white;
            text-decoration: none;   
        }
        a:hover{
            background-color: pink;
        }
    </style>
</head>

html内容：
<body>
    <ul>
        <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>
        <li><a href="">课堂</a></li>
        <li><a href="">好程序员</a></li>
    </ul>
</body>

（跳转链接内容没有写，只是个小练习，简单实现效果）

实现效果：

方法二：给<li>标签设置：hover样式(鼠标滑过样式)

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            padding: 0 20px;
            background-color: black;
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
        }
        a{
            color: white;
            text-decoration: none;
        }
        li:hover{
            background-color: pink;
        }
    </style>

（这个做法需要把
height: line-height: padding: 等属性加给<li>标签）

<body>
    <ul>
        <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>
        <li><a href="">课堂</a></li>
        <li><a href="">好程序员</a></li>
    </ul>
</body>

实现效果：