自定义链接提示

最新推荐文章于 2022-03-29 09:37:41 发布

ld__________

最新推荐文章于 2022-03-29 09:37:41 发布

阅读量2.7k

点赞数

分类专栏： Web前端文章标签： jquery特效插件提示框 css3

本文链接：https://blog.csdn.net/ld_____/article/details/47777997

版权

Web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

采用不同的方法触发页面浮动提示框，通过鼠标滑过触发浮动提示框

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提示信息。也可以加入图片、淡入淡出等效果，丰富特效。