点击小图片弹出大图

来源：互联网发布：seo发外链编辑：程序博客网时间：2024/04/20 10:37

<!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”标签的样式。此种写法的前提是被表达的样式标签必须在标签之内。文章开始的，鼠标放在小图上面，显示大图片的效果就是这个道理。