HTML

2024-07-04 03:17| 来源: 网络整理| 查看: 265

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

方法一：将标签强制转换标签类型为块元素，然后设置：hover样式(鼠标滑过样式) css样式： /* 清除自带间距 */ *{ 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; } html内容：首页课程云服务双选会共享课堂好程序员

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

实现效果：

方法二：给标签设置：hover样式(鼠标滑过样式) *{ 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; }

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

首页课程云服务双选会共享课堂好程序员

实现效果：

两种做法都可以实现滑过变换颜色的效果，但是一般使用方法一更加好，更加方便于用户操作使用，因为方法二如图所示，鼠标放置在区域内后就会变色，但是只有点击在文字上的时候才可以实现点击跳转操作。而方法一鼠标进入区域后即可点击跳转，更加方便实用，用户体验感更好。

【本文地址】

HTML

HTML

今日新闻

推荐新闻