当前位置：首页 → 问答吧 → 这个鼠标经过图片的效果很漂亮，但是有BUG。

这个鼠标经过图片的效果很漂亮，但是有BUG。

时间：2010-06-01

来源：互联网

复制内容到剪贴板

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过图片时出现半透明文字</title>
<style type="text/css">
body{background:#333}
img{border:none}
.wrap{margin:10px;position:relative;}
.photo a{position:absolute;display:block;border:1px solid #999;padding:2px}
.photo a:hover{border:1px solid #fff;text-decoration:none}
.photo a span {display:none;cursor:hand;text-align:center;font:bold 12px/30px Verdana, Arial;}
.photo a:hover span{width:500px;margin:0 2px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" border="0" alt=""/><span>英国巨石阵，一直以来都是一个谜，现在它是一处著名的旅游景点。</span></a></div>
</div>
</body>
</html>

我添加多个DIV，想让页面显示两个以上的图片的时候，他不显示第二个图片，是什么情况啊？还有类似这样的效果吗？

作者: sweetyous 发布时间: 2010-06-01

看看、

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标经过图片时出现半透明文字</title> <style type="text/css"> body{background:#333} img{border:none} .wrap{margin:10px;position:relative;} .photo a{position:absolute;display:block;border:1px solid #999;padding:2px} .photo a:hover{border:1px solid #fff;text-decoration:none} .photo a span {display:none;cursor:hand;text-align:center;font:bold 12px/30px Verdana, Arial;} .photo a:hover span{width:500px;margin:0 2px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} </style> </head> <body> <div class="wrap"> <div class="photo"><a href="#"> <img src="http://www.codefans.net/jscss/demoimg/wall5.jpg" border="0" alt=""/><span>英国巨石阵，一直以来都是一个谜，现在它是一处著名的旅游景点。</span></a></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: heng7421 发布时间: 2010-06-02

给 wrap 的CSS宽和高。。

作者: 7022 发布时间: 2010-06-02

这个鼠标经过图片的效果很漂亮，但是有BUG。

代码:

热门阅读

热门下载