用伪类:hover实现提示效果

作者：纯真来源：纯真博客时间：2008-05-29 12:59:00　

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

我用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>用伪类:hover实现提示效果 - asp之家</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="https://www.aspxhome.com/" mce_href="#" title=""><img src="https://www.aspxhome.com/imgages/logo.gif" alt="" /><span>返回asp之家首页</span></a></div></body></html>

标签：hover,伪类,提示,css

投稿

用伪类:hover实现提示效果

猜你喜欢

获取mssql的xml返回结构的方法

HTML 5新增的元素

301转向代码合集

纠结于ajax开发中 response的contentType 问题

javascript开发经验谈

网页用多宽才更合适？

[译稿]Web 字体的未来

ul设置浮动后不能自适应高度

ASP中RegExp对象正则表达式语法及相关例子

官方是这样定义 DOCTYPE HTML PUBLIC 的

mysql 主从服务器的简单配置

如何尽快释放掉Connection对象建立的连接？

不成熟的标准化是我们唯一惧怕的

仿阿里巴巴搜索导航设计效果

将滚动条（scrollbar）保持在最底部的方法

带农历的JavaScript日期时间js代码

用 JavaScript 解数学题

有关Oracle数据库的备份情况

交互设计模式(二)-Pagination(分页,标记页数)

SQL Server中索引使用及维护