不仅是初学者，甚至包括接触CSS很久的小伙伴都会以为:hover伪类只限用于a元素，都觉得它唯一的作用就是定义鼠标经过超链接时的样式。

语法：

元素:hover{…}

举例：“:hover”用于div

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:white;
            background-color: lightskyblue;
        }
        div:hover
        {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>

默认情况下，预览效果如下图所示。

分析：

在这个例子中，我们使用:hover为div元素定义鼠标经过时就改变背景色。

举例：:hover用于img

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img:hover
        {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <img src="img/girl.gif" alt="">
</html>

默认情况下，预览效果如下图所示。

分析：

在这个例子中，我们使用:hover为img元素定义鼠标经过时就为其添加一个边框。此外， “:hover伪类”应用非常广泛，任何一个网站都会大量地用到，我们要好好掌握。