点击小图片弹出大图

最新推荐文章于 2024-06-18 15:24:37 发布

恼火的昵称

最新推荐文章于 2024-06-18 15:24:37 发布

阅读量1.4k

点赞数

分类专栏： Div+Css 文章标签： class xhtml css html border image

本文链接：https://blog.csdn.net/chenglidian/article/details/6621416

版权

Div+Css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

恼火的昵称

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击小图片弹出大图

<!-- .list{position:relative;} .list span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; width: 500px; } .list span{ po
复制链接

扫一扫

专栏目录