Blog > 互联网产品设计 > css实现鼠标触发图片提示信息

css实现鼠标触发图片提示信息

先看例子http://www.5key.net/ex/12_6
IE7.0,FF下通过,只是有点小问题,IE7下无法实现alhpa透明。

初试样式:
uploads/200708/06_104527_2532661166.jpg

触发样式:
uploads/200708/06_104649_2532662898.jpg

<!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>
<style>
body{ font:14px Arial, Helvetica, sans-serif;}
img{border:0px;}
.pic{}
.pic a{ text-decoration:none;border:1px solid #ccc; float:left;}
.pic a:hover{text-decoration:none; border:1px solid black; float:left;}
.pic span{display:none;}
.pic:hover span{display:block; clear:both; padding:5px; margin-top:-27px; background:black; color:white; font-weight:bold;
filter:Alpha(opacity=90);-moz-opacity: 0.9;}
</style>
</head>

<body>
<div class=”pic”>
<a href=”#” mce_href=”#”><img  src=”cat.jpg” mce_src=”cat.jpg” width=”298″ height=”422″ /><span>加菲猫2《双猫记》</span></a></div>
</body>
</html>