:hover 鼠标悬浮时(基本导航)

: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>

:hover 鼠标悬浮时(基本导航)

猜你喜欢