<!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 僞類用於向某些選擇器添加特殊的效果。
語法
僞類的語法：
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>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”標籤的樣式。此種寫法的前提是被表達的樣式標籤必須在標籤之內。文章開始的，鼠標放在小圖上面，顯示大圖片的效果就是這個道理。