<!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>sample</title>
<style type="text/css" media="screen">
body {
font-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
font-size:14px;
line-height:1em;
background:url(http://www.moonless.net/i/sample.gif) no-repeat -33px -123px;
text-decoration:none;
position:relative;
}
.abtn_3 span {
visibility:hidden;
overflow:hidden;
}
.abtn_3:hover {
text-indent:0;
}
/* 提示框 */
.hintsB {
display:none;
}
.abtn_3:hover .hintsB {
display:block;
position:absolute;
top:-1.3em;
left:20px;
width:180px;
padding:0 0 0 5px;
background:url(http://www.moonless.net/i/sample.gif) no-repeat 0 center;
color:#326324;
cursor:text;
font-weight:normal;
}
@media all and (min-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
line-height:18px;
padding:7px 4px 6px 6px;
border:1px solid #bed48f;
border-left:none;
background-color:#effaeb;
font-size:12px!important;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<a href="javascript:void(0);" class="abtn_3">
<span>提示</span>
<div class="hintsB">
<div>这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！</div>
</div>
</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>sample</title>
<style type="text/css" media="screen">
body {
font-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
font-size:14px;
line-height:1em;
background:url(http://www.moonless.net/i/sample.gif) no-repeat -33px -123px;
text-decoration:none;
position:relative;
}
.abtn_3 span {
visibility:hidden;
overflow:hidden;
}
.abtn_3:hover {
text-indent:0;
}
/* 提示框 */
.hintsB {
display:none;
}
.abtn_3:hover .hintsB {
display:block;
position:absolute;
top:-1.3em;
left:20px;
width:180px;
padding:0 0 0 5px;
background:url(http://www.moonless.net/i/sample.gif) no-repeat 0 center;
color:#326324;
cursor:text;
font-weight:normal;
}
@media all and (min-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
line-height:18px;
padding:7px 4px 6px 6px;
border:1px solid #bed48f;
border-left:none;
background-color:#effaeb;
font-size:12px!important;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<a href="javascript:void(0);" class="abtn_3">
<span>提示</span>
<div class="hintsB">
<div>这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！这里是提示内容哦！</div>
</div>
</a>
</body>
</html>
分享到：
发表评论
-
db2, oracle和sqlserver取前几行的语法
2010-10-18 11:58 875db2： select * from tab f ... -
项目总结（Ajax＋Struts＋Spring＋Hiberante＋SQLServer2000） 第一部分 (转载)
2008-03-29 16:49 644总算将一个项目勉强上线，也是第一次我独立完成的这么多任务，框架 ... -
实例学习Spring和Hibernate的一点点体会 (转载)
2008-03-29 17:36 748昨天用Spring写DAO,有朋友说比较Hibernate还是 ... -
jsp+xsl查询数据库
2008-04-06 19:26 985往往JSP通常用来动态的生成HTML文件，来 ... -
hibernate3.0中文查询问题解决方法
2008-04-07 13:08 707在applicationContext.xml中加入如下代码： ... -
简单的JSTL应用（入门）
2008-04-07 19:51 972需要的包及TLD文件: 首先需要将用到的jar包放入WEB-I ... -
EL表达式语言
2008-04-09 00:30 652引用：http://blog.163.com/s_zhchlu ... -
使用COOKIE登录验证（转载）
2008-04-21 20:11 1486附加功能：登录成功后 ... -
JavaMail
2008-04-30 13:19 610package org.hank.mail;import ... -
用"window.showModalDialog()"实现DIV模式弹出窗口 (转)
2008-05-04 09:20 17351、test.html 测试页 <html> ... -
以二进制流的方式存取图像
2008-05-07 00:03 1194imageinfo.sql CREATE TABLE ... -
java 生成图片缩略图
2008-05-08 13:26 7139方法一: import javax.imageio.Image ... -
一个不错的弹出窗口的js效果(值的收藏)
2008-06-02 19:00 1076<script type="text/jav ... -
<c:forEach>&条件标签使用
2008-06-06 09:57 7059<c:forEach>标签的使 ... -
div 缓慢下拉效果
2008-06-10 18:05 1489<!DOCTYPE html PUBLIC " ... -
弹出窗口传值
2008-06-13 09:07 867子窗口中内容： function change(obj){ ... -
Action之间传值
2008-06-13 09:13 826return new ActionForward(" ... -
数据库连接池简介
2008-06-15 14:30 706数据库连接是一种关键的有限的昂贵的资源，这一点在多用户的网页应 ... -
Spring的事务管理
2008-06-15 14:32 387Spring提供了一致的事务管理抽象。这个抽象是Sprin ... -
form产生的空行的解决
2008-06-16 16:32 634利用css属性，将form的内部上下左右的填充距离设置为0就好 ...
相关推荐
今天要给大家带来另外一款基于CSS3的文字菜单鼠标悬停气泡提示动画，它比较适合用在文字菜单上，当鼠标滑过菜单项时，你可以定义其弹出一个气泡提示框，可以是一个小图标。另外，这些气泡提示框在弹出的时候还会配合...
点击弹出提示框，可以用在PHP上，JS+CSS
这是一款由CSS3 鼠标悬停时弹出文字提示框特效，一个HTML5 CSS3实现的悬停提示框效果，当鼠标放在指定区域时，会弹出一个漂亮带关闭功能的文字提示框，这在网页上已经有相当高的使用频率了，本悬停提示特效基于HTML5...
3种简单的css3鼠标悬停帮助图标显示图片文字提示框代码 3种简单的css3鼠标悬停帮助图标显示图片文字提示框代码
纯CSS实现tips帮助提示框代码，鼠标悬停在问号上，出现提示框。提示框有纯文字，html代码，图片三种形式。
HTML5 css3制作的智能手机风格的弹出提示框，这些提示框一种有四种类型:1、操作成功、2、误提示、3、正在加载、4、通用提示。鼠标点击对应的演示按钮，即可显示出提示效果，每个提示框中的内容都具有动画效果。这些...
主要介绍了一款可自定义箭头样式的CSS3气泡提示框，CSS气泡提示框由纯CSS完成，最大的特点就是可以自定义配置，包括文字颜色、背景颜色和箭头方向等，想要拥有这款提示框的朋友不要错过
喜欢 Iphone界面漂亮的冒泡提示效果吗？想把这种效果用在你的网站上更好的提高用户体验吗？ 想的话就下载本特效吧，不过可惜的是它只支持CSS3属性； 请在支持CSS3浏览器下浏览
jQuery CSS3 弹出框插件，带阴影效果，自带有10多种用法的演示代码，比如错误框、提示框、文字显示框等，点击示例页下面的按钮，即可弹出对应的提示框效果，测试请使用Chrome、火狐、Opera浏览器，IE11下也表现良好...
css3 fontawesome图标字体使用鼠标悬停动画图标字体
abTips基于jquery运行的文本描述提示插件。 提示框支持上下左右等多种定位，可自定义信息属性标签默认为abtext，也可直接选择获取title属性标签默认信息。...css/abTips.css (此文件为插件提示框箭头等样式文件)
文字提示效果，点击后关闭
<link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" />... 这是一款使用HTML5 SVG来制作，并通过anime.js来制作非常炫酷的鼠标悬停弹性动画代码的弹性动画Tooltip提示框特效。
是一个简洁轻盈的前端框架，主要实现了尺寸限制、保留间距、清除浮动、设置浮动、文字对齐、常用元素、标题、文字、图片、文章、按钮、漂浮提示、项目列表、表单、表格、栅格系统、对齐方式、栅格隐藏、动画、淡入...
我们将使用HTML和CSS来实现一个仿ChatGPT聊天对话官方页面。我们的目标是创建一个与chat.openai.com相似的界面，展示一种用于展示聊天机器人对话的布局和样式。 为了实现我们的目标，我们需要遵循以下步骤： 1. ...
今天我们要来分享一款基于纯CSS3的地图应用，这款地图应用的特点是地图上有许多标注点，点击标注点即可在页面上弹出一个文字提示框，用来说明该标注点在地图上的详细信息。如果你需要有一款带标注功能的地图应用，...
文字原版，高清，带书签，学习css的好资源 译者序 ix 序 xi 前言 xiii 致谢 xv 本书是怎样炼成的 xviii 关于本书 xx 第 1 章 引言 1 Web 标准：是敌还是友 2 CSS 编码技巧 7 第 2 章 背景与边框 17 1 半透明边框 18...
全书pdf 210M, 共分9个分卷, 这是第8分卷 中文名: 精通CSS与HTML设计模式 英文名: Pro CSS and HTML Design Patterns 资源格式: PDF 版本: 中文版高清扫描版&英文版 发行时间: 2008年9月 ...第20章 提示框 索引...
有点微信风格的CSS3信息提示特效 tooltips代码，或者说是用户通知提示框，基于Vue.js实现，整体外框美化成了圆角风格，视觉效果很“微信”。好像现在很多PC端的风格也开始走简洁路线，都挺简洁，之前也模拟过这种...