网站超链接和图片提示效果(jquery)

最新推荐文章于 2021-08-26 14:56:49 发布

阿聪世家

最新推荐文章于 2021-08-26 14:56:49 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：网站常用jquery效果文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/congcong875/article/details/8646326

网站常用jquery效果专栏收录该内容

52 篇文章

订阅专栏

本文介绍了使用jQuery实现两种不同的鼠标悬停提示效果的方法：一种是超链接提示，当鼠标悬停在带有特定类的超链接上时显示文本提示；另一种是图片提示，当鼠标悬停时显示该链接指向的图片预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.超链接提示效果：

<script type="text/javascript">
//<![CDATA[
$(function(){
    var x = 10;  
	var y = 20;
	$("a.tooltip").mouseover(function(e){
       	this.myTitle = this.title;
		this.title = "";	
	    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left": (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){		
		this.title = this.myTitle;
		$("#tooltip").remove();   //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left": (e.pageX+x)  + "px"
			});
	});
})
//]]>
</script>

2.图片提示效果：

<script type="text/javascript">
//<![CDATA[
$(function(){
	var x = 10;
	var y = 20;
	$("a.tooltip").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";	
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中						 
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
		this.title = this.myTitle;	
		$("#tooltip").remove();	 //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})
//]]>
</script>