用伪类:hover实现提示效果

作者：纯真 2008年05月28日 星期三 22点10分 Tags：,

在实现鼠标停在某元素上，会出现提示信息，以前我们太多是采用javascript脚本代码来实现。

看了怿飞的IE中伪类:hover的使用及BUG，我用CSS来实现同样的效果，看下例：
<!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=utf-8" />
<title>返回蓝色理想首页</title>
<style>
* {
 margin:0;
 padding:0;
}
div {
 margin:100px;
 list-style:none;
}
div img {
 border:0;
}
div a {
 color:#fff;
 text-decoration:none;
 position:relative;
 display:block;
}
div span {
 font-size:12px;
 display:none;
}
div a:hover {
background:;
}
div a:hover span {
 padding:2px;
 background:#ffc;
 color:#000;
 font-size:12px;
 border-width:1px 2px 2px 1px;
 border-color:#000000;
 border-style:solid;
 position:absolute;
 top:-30px;
 left:0;
 display:block;
}
</style>
</head>
<body>
<div> <a href="#" mce_href="#" title=""><img src="http://case.blueidea.com/img/common/logo.gif" alt="" /><span>返回蓝色理想首页</span></a>
</div>
</body>
</html>

归类于：发掘分享

随机日志

评论 RSS Feed。 引用 URL

4条评论

  1. 不错 学习了

    此评论由：chief 发表于：2008年05月29日 星期四 10点19分

  2. 好，也学习了

    此评论由：天空诚 发表于：2008年05月29日 星期四 12点59分

  3. 效果不错，我试了一下 决定应用到 淘折网 上面www.taozhew.com

    此评论由：www.taozhew.com 发表于：2008年05月29日 星期四 18点11分

  4. 怎么能实现 4行6列的效果，提示框 在每个图片的底部那 高手试试改下吧！！！
    http://www.taozhew.com

    此评论由：www.taozhew.com 发表于：2008年05月29日 星期四 18点13分

发表评论