css超链接伪类

在“超链接伪类”这一节，我们知道“a:hover”是定义鼠标经过超链接（a标签）时的样式。不仅是初学者，甚至包括很多学习CSS很久的人都以为“:hover”只限于a标签，都觉得“:hover”唯一的作用就是定义鼠标经过超链接（a标签）时的样式。

你要是那样理解，那你就埋没了一个功能强大的CSS技巧了！请记住，“:hover”伪类可以定义任何一个元素在鼠标经过时的样式！

语法：

元素:hover{}

说明：

“元素”可以是任意的块元素和行内元素。

举例1：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>:hover伪类</title>

    <style type="text/css">

        #div1

        {

            width:100px;

            height:30px;

            line-height:30px;

            border:1px solid #CCCCCC;

            text-align:center;

            color:white;

            background-color: #40B20F;

        }

        #div1:hover{background-color: #286E0A;}

        img:hover{border:1px solid red;}

    </style>

</head>

<body>

    <div id="div1">绿叶学习网</div>

    <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

</body>

</html>

在浏览器预览效果如下：

鼠标经过时样式如下：

分析：

鼠标经过div层时，我们改变了它的背景颜色，而鼠标经过img图片时，我们为图片添加了一个红色边框。

“:hover”伪类应用非常广泛，在绿叶学习网中也大量使用，大家仔细观察一下绿叶学习网就知道了

测试

测试

继续阅读