css模拟title和alt的提示效果[转]
这段时间写了很多页面代码，除了一些知识重复以外，也学到css的一些新东西，或许是旧东西，但是还是希望能对大家有用。
其实在css里面有很多对a的样式应用，因为a标签是仅有的默认可以触发动作的标签，因此在很多时候可以用css来控制a达到js才能达到的效果，比如今天要介绍的css仿title和alt的提示效果：
先来分析一下这种效果的特点，无非就是在鼠标悬停的时候出现一个包含介绍文字的提示层，如果用传统的javascript来实现，就要设置对象的onmouseover和onmouseout属性，而如果把对象看作是a属性中的link和hover的话，这个问题就更清晰了，因为只要把对象的link属性设置为隐藏提示层、hover属性设置为呈现提示层即可，那么这个提示层的位置究竟在哪里呢？当然是在a标签中间了，目前常用的办法是把提示内容放在span标签中间进而包含在a标签内部，然后设置a：link和a：hover下不同的span样式即可。
下面结合代码给大家说一下这个简单的原理：
<html>
<head>
<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover {background:#eee;color:#333;}
.info span {display: none }/*设置正常下的span为隐藏状态*/
.info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{display:block;position:absolute;top:30px;left:60px;width:130px;
border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
</style></head>
<body>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
<a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog，里面有一些网站设计和制作的东东，希望大家常来交流</span></a>
</body>
</html>
2.
<!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:verdena; font-size:14px; color:#000 }
h1{ font:verdena; font-size:22px; color:#000 }
h2{ font:verdena; font-size:15px; color:#000; text-align:left }
div#main { margin:30 }
/*关键代码开始*/
a.info {
position:relative; z-index:0; background-color:red; color:#000; text-decoration:none }
a.info:hover {
z-index:1; background-color:#252525 }
a.info span {
display: none }
a.info:hover span { display:block; position:absolute; top:25px; left:60px; border:1px solid #0cf; background-color:#00ff00; color:#000; text-align: center }
/*关键代码结束*/
</style>
</head>
<body>
<div id="main">
<h1>单纯使用CSS实现动态提示信息</h1>
<h1>不用js可以实现信息提示效果?!(title和alt除外)</h1>
<h2>By [51js.com]zdzhuo</h2>
<h2>Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用</h2>
<br>
<a class="info" href="javascript:;"><b>这是提示信息</b><span>www.51js.com</span></a>不需要js就能实现的提示信息<a class="info" href="javascript:;"><b>单纯使用CSS实现提示信息</b><span>一个非常简便的方法<br>
原理也浅显易懂</span></a><br>
<br>
<a class="info" href="javascript:;"><img src="<a href="http://nb001722.sosoo.net/51js.gif" target="_blank">http://nb001722.sosoo.net/51js.gif</a>" border="0"><span>这是我在51js.com的专用头像</span></a><br>
<br>
<br>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/iamv/archive/2008/02/05/1065038.html
css模拟title和alt的提示效果[转]相关推荐
- CSS 魔法 | 超强的文本超出提示效果
本文由阅文前端严文彬授权分享 原文链接:https://juejin.cn/post/6966042926853914654 在 mac 文件管理中有这样一个小细节. 当文件名不超过一行时,完整显示, ...
- jQuery实现的简单文字提示效果模拟title
模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析: <!-- 引用jQuery --><script src="jquery.j ...
- 用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
- js实现自定义title提示效果
html结构 要实现给定义的节点添加提示效果,需要首先需要添加自定义属性data-title,这是data-title是空的,然后通过js把title的值放到里面 <span title=&qu ...
- JS/CSS 各种操作信息提示效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- 纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言 由于公司产品的活动,需要模拟类似下雪 ...
- 气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠 ...
- CSS模拟实现色阶效果
CSS模拟实现色阶效果,对各种版本的浏览器兼容性考虑的挺周全,在兼容性方面出色,这个只是模拟色阶的效果,显示出不同的色块的深浅颜色,并标识出来英文的颜色名称,其实技术方面不太难,只是有些麻烦,非常感谢 ...
- 用css实现扑克牌，图片的翻转效果
用css实现扑克牌,图片的翻转效果 话不多说,直接上代码! 1.实现商品图片的翻转以及信息的展示(下面代码仅是个人想要效果的HTML代码,所有的class名称可根据自身需求进行改动) <!doc ...
- html5背景文字,HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
最新文章
- 定义Serializer序列化器
- Eclipse 最常用的 10 组快捷键，个个牛逼！
- 网站用户登录验证：Servlet+JSP VS Struts书剑恩仇录
- 使用 Google Gears 开发离线应用
- c 语言 多进程,VC++中进程与多进程管理的方法详解
- WWDC2014:留给微软的时间不多了!
- 现代操作系统： 第八章 多处理机系统
- iOS点击推送消息跳到应用指定页面
- Cloud Programming Simplified: A Berkerley View on Serverless Computing笔记
- 找不到libmmd.dll无法继续执行代码_300 行代码带你秒懂 Java 多线程！| 原力计划...
- 巨杉mysql支持临时表_sql server用变量动态命名临时表表名
- 【算法】剑指 Offer 50. 第一个只出现一次的字符
- 解决shell脚本“syntax error near unexpected token `fi‘”的问题。
- qt 对话框位置如何确定_便利店如何确定收银台位置？
- Linux中的mce处理--mce学习笔记
- Ubuntu 14.04 配置iptables防火墙
- dev c++调试怎么看变量的值_DevC++ 安装教程
- Java 接口实例化
- Puget Systems发布硬件可靠性报告，三星SSD表现低故障率
- 单例模式详解（附常见的7种单例模式源码）