鼠标放在连接上时,出现一个图片,移开图片消失-鼠标放在连接上时的特效
鼠标感应图片特效
今天晚上要找一个鼠标放在连接上时的特效，还行，一下子就找到了：
CSS设计----鼠标放在连接上时,出现一个图片,移开图片消失
相信很多CSS设计爱好者已经看过blueidea或者其他CSS设计站点的一些CSS特效了吧
CSS绝对值得我们赞一个,这些站点也写出了类似今天我要写的代码,不过我觉得他们写得还是有点多显得累赘,今天就把那些没有什么用的代码去掉,并且加入"新的特性"
代码如下：
<html>
<head>
<style type="text/css">
body{font-size:12px;}
a{color:#333;text-decoration:none;postition:relative;}
a:hover{color:#6699ff;text-decoration:none;background:none;}
span{display:none;}
a:hover span{display:block;top:28px;left:30px;position:absolute;}
a:hover span p{padding:5px;border:1px #333 dashed;}
</style>
</head>
<body>
<br>
<a href=http://www.panpan.org>盼盼的家园<span><p><img src="http://www.panpan.org/img/girl.jpg"/></p></span></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href=http://www.panpan.org><img src=http://www.panpan.org/logo/8831logo.gif alt="鼠标放过来看看" border=0><span><p><img src="http://www.panpan.org/img/girl.jpg"/></p></span></a>
</body>
</html>
![http://www.panpan.org/img/girl.jpg"/></p></span></a](http://www.panpan.org/img/girl.jpg"/></p></span></a){kind=link}
注意：在上面的代码中，鼠标放上后显示的图片的位置控制代码是：
a:hover span{display:block;top:28px;left:30px;position:absolute;}
如果将该句话改成
a:hover span{display:block;position:absolute;}
那么，鼠标放上后图片出现的位置是在该连接的右侧，图片会根据连接的位置而出现在右上或右下后右侧。
后记：
下面的代码可以实现这样的效果，当鼠标放在连接上的时候，在连接的位置上出现一个图片，原来连接的文字或图片被覆盖。
代码如下：
换图片显示这样就可以
<a onmouseover="panpan.src='http://www.panpan.org/img/girl.jpg';" title="盼盼的家园" onmouseout="panpan.src='http://www.panpan.org/logo/8831logo.gif';" href="http://www.panpan.org"><img src="http://www.panpan.org/logo/8831logo.gif" border=0 name=panpan></a>
以上所有代码的演示见：
http://www.panpan.org/newtexiao/onmouse.htm