采用不同的方法触发页面浮动提示框,通过鼠标滑过触发浮动提示框
1、使用title属性
在默认状态下可以使用元素的title属性实现链接提示效果 HTML title
title 属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段工具提示文本(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提示信息。也可以加入图片、淡入淡出等效果,丰富特效。