cursor:pointer的重要性

昨天今天都试着做一个幻灯片，

时间花了很久，效果却总是出不来，

今天早上又花了好多时间，

现在终于明天为什么了，原来少了：cursor:pointer。

实例一：

<!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" />
<title>无标题文档</title>
</head>
<style type="text/css">

 span{
visibility: hidden;
  }
 a{
 background:url(http://img1.qq.com/lady/pics/12105/12105393.jpg) no-repeat left top;
 width:158px; height:200px;display:block; border:1px solid #FFFFFF; float:right;overflow:hidden;
 }
 a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute;top:0px; z-index:20px; left:0px; visibility: visible;}
img{ width:400px; height:280px; border:7px solid #FFFFFF};
</style>
<body>
<a href="# "><span><img src="a2.jpg" alt="图片说明" /></span></a>

</body>
</html>
实例二：<!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" />
<title>无标题文档</title>
</head>
<style type="text/css">

 span{
visibility: hidden;
  }
 a{
 background:url(http://img1.qq.com/lady/pics/12105/12105393.jpg) no-repeat left top;
 width:158px; height:200px;display:block; border:1px solid #FFFFFF; float:right;overflow:hidden;
 }
a:hover span,a:active span{position:absolute;top:0px; z-index:20px; left:0px; visibility: visible;}
img{ width:400px; height:280px; border:7px solid #FFFFFF};
</style>
<body>
<a href="# "><span><img src="a2.jpg" alt="图片说明" /></span></a>

</body>
</html>

发现只是少了一句： a:active,a:hover{ cursor:pointer}；下面的效果就出不来了。

神奇。

posted @ 2008-08-08 10:05  echohqu  阅读(911)  评论(0)    收藏  举报