呃，或许标题起成这样根本不准确，但我也不知道该怎么命名这个标题，所以将就着吧。

一直使用@reply的方式来进行评论，什么是@reply呢？就是从以前的主题到现在，在每条评论的右边都会有Reply按钮，点击一下，评论框里面就会显示“@user:”然后写下你的留言，这样就很容易知道你在回复谁的评论了，而且因为我使用了Mail to commenter这个插件，被回复者会收到邮件提醒，至于@reply这个名字，可能是从Twitter上延用过来的吧。有人说，用嵌套的话，谁回复谁不是很容易看出来么，话是这么说没错，但嵌套的样式不好控制，也不知道套多少层合适，另外，如果上层的嵌套太多了，可能会影响别人看后面评论的心情吧，当然如果你不怕折腾，试试木木同学的无限嵌套。打住，我这篇文章要说什么问题呢？先上个图吧：

这样总该明白了吧。本来留言的时候点击Reply按钮后会自动生成被回复评论的锚记，可以点击这个锚记跳转到被回复的评论那里，但体验总有点不好。而鼠标悬浮于锚记上自动出现被回复的评论，最初是出现在shawn大师的博客上，后来Yinheli同学也按自己的方法钻研出来了。不过yinheli同学的代码感觉和他自己的主题结合着，不太适合我，改了半天老出不来效果，所以我就试着自己用jQuery折腾一下看看。

先打开Firebug分析一下DOM，我们就以图中的这个回复评论为例。因为我的评论没有分页，所以回复的评论都在本页里面，并且@user这个链接里面的href值是以“#comment-”开头的，另外要注意的是，每个评论的li都拥有一个id，这个id的值也就是href里面的值，比如上图中的href和id都是comment-2742。好了，我们现在要做的就是把href里面的链接取出来，然后取相同值的id的li，并且把这个li元素克隆一下，追加到DOM里面，再配合CSS的absolute定位，让你的评论能显示在鼠标的旁边。

下面上代码，注释我都写在后面，希望大家都理解。

jQuery代码：

//hover show comments
	$(".commentlist li p a").mouseover(function(e){		//鼠标悬浮在评论中有a标签的地方时
		var A=/^#comment-/;		/*正则表达式，用来筛选以#comment-的元素*/
		if ($(".commentlist li p a").attr("href").match(A)) 	//如果a里面的href里面的值与正则表达式里的相匹配，那么执行花括号里面的代码块
		{
			var t_link = $(this).attr("href");		//定义t_link来存储href里面的值
			var h_com = "<li class='hover-comment'>" + $(t_link).html() + "</li>";		//定义h_com，在里面赋上html代码
		} else h_com = "";
		$("body").append(h_com);	//将h_com里面的值追加到body里面
		$(".hover-comment").css({
			"top":(e.pageY+10) + "px",
			"left":(e.pageX+10) + "px"
		}).fadeIn("slow");		//让评论在鼠标悬浮于@user链接里面出现
	}).mouseout(function(){
		$(".hover-comment").fadeOut("slow",function(){$(this).remove()});		//鼠标移出链接时，将添加到body里面的h_com删掉
	}).mousemove(function(e){		//鼠标在@user上移动的时候，让显示出来的评论框也跟着移动
			$("#linktip").remove();
			$(".hover-comment").css({
			"top":(e.pageY+10) + "px",
			"left":(e.pageX+10) + "px"
		});
	});

CSS代码：

.hover-comment{
	position:absolute;		/*绝对定位，让悬浮的评论脱离文档流，方便出现在鼠标旁边*/
	width:580px;
	border:1px solid #7DA028;
	list-style:none;
	display:none;		/*添加到body中后，让它不显示，然后在js里以fadeIn的方式显示*/
	background:#FFF;
}

不知道大家能不能理解呢？另外有一个问题就是，我以前换主机的时候，数据库处理上出了问题，所以有的评论对不上，这样的话鼠标悬浮的时候就会出现null，怎么解决呢？希望知道的朋友提供个方法，谢谢！

参考阅读：

1. 鼠标悬浮实现显示留言内容(上)

2. 鼠标悬浮实现显示留言内容(下)