:hover 设置元素在其鼠标悬停时的样式。
也就是鼠标箭头悬浮在该位置上,引发样式变化.当鼠标移开后,样式复原.
而你的网页中如果还存在这些伪类选择器,就必须按照以下顺序去书写.(毕竟是人家造就出的问题,也只能按解有效的方法去解决)
a:link {} //设置超链接a在未被访问前的样式。(即a标签未曾点击时的样式,往往在点击过一次a标签后,这效果就必须重置游览器了)
a:visited {} //设置超链接a在其链接地址已被访问过时的样式。(即点击a标签后,所呈现的样式.)
a:hover {} //设置元素在其鼠标悬停时的样式。
a:active {} //设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。(按住的那个状态才会显现出的样式)
往往只有给<a>标签本身添加个样式,就能解决颜色不匹配的问题.
<style>
a:link {
...
}
a:visited {
...
}
a:hover {
...
}
a:active {
...
}
</style>
这是最简单的鼠标悬浮背景变色的例子,也是应用导航中最常见的例子.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> nav{ //导航的一大整块 width: 100%; background: #284f86; overflow: hidden; } .ju{ //居中的子块 width: 80%; margin: 0 auto; } .ju ul{ //去li的点,放li里也行 list-style-type: none; } .ju ul li{ //将li浮动,横向排列. padding: 0 10px; float: left; overflow: hidden; //清除浮动,防止塌陷 } .ju ul li a{ //给a标签设置样式 padding: 10px 20px; color: #fff; //如果这里不设置文字颜色,很可能会出现文字颜色异常问题 display: block; //由于a标签不是块标签,所以就只能将其变成块标签 text-decoration: none; //去下划线的 } .ju ul li a:hover{ //这部分就是鼠标悬浮部分 background: #fff; //背景颜色为白色,可以按网页色调修改 color: #f00; //悬浮后的颜色变化 border-radius: 5px; //圆角...总之就在这里添加效果 } </style> </head> <body> <nav> <div class="ju"> <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> </ul> </div> </nav> </body> </html>