<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
.list{position:relative;}
.list span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; width: 500px; }
.list span{
position: absolute;
padding: 3px;
border: 1px solid gray;
visibility: hidden;
background-color:#FFFFFF;
}
.list:hover{ background-color:transparent;
}
.list:hover span{
visibility: visible;
top:0; left:60px;
}
-->
</style>
</head>
<body>
<div>
<a class="list" href="#"><img src="http://hi.csdn.net/attachment/201107/20/0_1311173571E7X2.gif" width="156" height="122" border="0" />
<span><img src="http://hi.csdn.net/attachment/201107/20/0_1311173571E7X2.gif" alt="big" /></span>
</a>
</div>
</body>
</html>
CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果。
语法
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
伪类与 CSS 类
伪类可以与 CSS 类配合使用:
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过,那么它将显示为红色。
总结:
1:伪类常用于网页内超链接样式。(“选择符”与冒号之间不要有空格)比如:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
2:用类或者ID的写法,比如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.my_class:hover{ background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
</head>
<body>
<div class="my_class">
<a>我是a标签 </a> <br /> <br /> <br /> <br />
<span>我是span标签</span>
</div>
</body>
</html>
以上代码当鼠标放在类为“my_class”的标签时候标签内的背景变为红色,如果想要定义里面 某一个样式,那么就如下定义样式表:
<style type="text/css">
.my_class span:hover{ background:red;}
</style>
鼠标只放在“span”标签上,其背景才变成红色。)
3:如下定义样式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.my_class span:hover p{ background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="my_class">
<a>我是a标签 </a><br /><br /><br /><br />
<span>我是span标签<br /><br /><br /><br />
<p>我是P标签内容</p>
</span>
</div>
</body>
</html>
以上代码样式表,当鼠标放在 “span”标签上的时候 “span”标签内“P”标签的样式。此种写法的前提是被表达的样式标签必须在标签之内。文章开始的,鼠标放在小图上面,显示大图片的效果就是这个道理。