自定义链接提示
2015-08-19 11:23
411 查看
采用不同的方法触发页面浮动提示框,通过鼠标滑过触发浮动提示框
title 属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)
虽然能够实现链接提示效果,但是实际应用中需要更加美观或者与页面相搭配的效果。
HTML代码:
提示信息追随鼠标的移动,提示信息内容与按钮文本一致
HTML代码:
Js代码:
*_text可以修改为固定值
CSS代码:
a的style与之前例子的a{}一致
1、使用title属性
在默认状态下可以使用元素的title属性实现链接提示效果 HTML titletitle 属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)
<button title="点击查看详细信息">按钮</button>实际效果如下
虽然能够实现链接提示效果,但是实际应用中需要更加美观或者与页面相搭配的效果。
2、纯CSS实现
demo效果如下,鼠标滑动,显示提示信息。HTML代码:
<a href="#">按钮 <span class="tipTop-demo">点击查看详细信息</span> </a>CSS代码:
a{ text-decoration: none; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 5px; position: relative; display: inline-block; color: #000; } .tipTop-demo{ display: none; } a:hover .tipTop-demo{ display: block; width: 100px; height: 30px; background-color: #1abc9c; line-height: 30px; text-align: center; position: absolute; left: 80px; top: 40px; color: #FFFFFF; font-size: 13px; padding: 0 5px; }
3、jquery鼠标移动特效
demo效果如下,鼠标滑动,显示提示信息提示信息追随鼠标的移动,提示信息内容与按钮文本一致
HTML代码:
<a href="#">按钮</a>
Js代码:
$("a").live('mouseover', function(e) { _text = $(this).text(); _tooltip = "<div id='tipTop-demo'><span> "+_text+"</span></div>"; $("body").append(_tooltip); $("#tipTop-demo").show(); $("#tipTop-demo") .css({ "top": (e.pageY+10) + "px", "left": (e.pageX +10) + "px" }).show("fast"); }); $("a").live('mouseout', function(e) { $("#tipTop-demo").remove(); }); $("a").live('mousemove', function(e) { $("#tipTop-demo").css({ "top": (e.pageY+10 ) + "px", "left": (e.pageX+10) + "px" }).show(); });
*_text可以修改为固定值
CSS代码:
a的style与之前例子的a{}一致
#tipTop-demo{ position: absolute; background-color: #44cacb; padding: 0 5px; color: #fff; display: none; z-index: 9998; height: 30px; line-height: 30px; width: 100px; text-align: center; }通过以上方式,可以生成同页面效果相搭配的tiptop提示信息。也可以加入图片、淡入淡出等效果,丰富特效。
相关文章推荐
- Unity 2D 教程汇总
- Android 七种进度条的样式
- android体系结构介绍
- jQuery蓝色风格滑动导航栏代码分享
- aauto学习系列之<6>控制语句1
- magento the user is locked
- owncloud源码分析7--客户端上传2
- 关于信号中断与慢系统调用的深度发现
- Cash Machine(POJ--1276 【多重背包】
- easyui赋值问题
- java:队列模拟(自定义链表结构 +LinkedList )
- String中"equals"和"=="的区别
- 配置Nginx 1.2.1 + JBOSS AS 7负载均衡及Session同步
- Linux环境进程间通信(四) 信号灯
- 新的开始:第一次用Word发布CSDN博客
- 伯努利分布、二项分布、几何分布、超几何分布、泊松分布
- Why Link Prediction?
- 深入解析Python中的集合类型操作符
- [leetcode][math] Ugly Number
- Ajax实现--javascript