在“超链接伪类”这一节,我们知道“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”伪类应用非常广泛,在绿叶学习网中也大量使用,大家仔细观察一下绿叶学习网就知道了
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。