简单实现鼠标移上去显示所有文字，移走又隐藏

简单实现鼠标移上去显示所有文字，移走又隐藏，并且会依据你鼠标的位置，相应的发生改变。

1. jsp代码：

	<div id="allDiv" style="border:solid 1px black;display: none;position: absolute;font-size: 13px;font-weight: normal;background-color: beige;font-family: 宋体;width: 200px;padding-top:3px;padding-left:5px;padding-right:5px;">
	</div>

这段代码就是隐藏的一个div，也就是需要将内容显示在这里面。

		<td height="18" bgcolor="#FFFFFF" style="padding-top:3px" align="center">
			<div align="center" class="STYLE2 " style="width: 400px;" onmouseover="showAll(this);" onmouseout="javascript:$('#allDiv').css('display','none').css('width', '200px');">
				是
			</div>
		</td>

别的都不需要看，就是一个表格，主要是onmouseover和onmouseout。
onmouseover主要就是调用js里的方法，让隐藏的内容显示出来。
onmouseout主要就是让显示出来的再隐藏回去。

2. js代码：

		//显示隐藏的内容
 		function showAll(obj){
		 	var wordnodeoffset = $(obj).offset();
    		var str=$(obj).html();
    		//这里是判断内容是否过多，过多就加大显示的宽度
    		if($("#allDiv").height() > 100){
    			$("#allDiv").css("width", "400px");
    		}else{
    			$("#allDiv").css("width", "200px");
    		}
    		$("#allDiv").html(str);
    		$("#allDiv").css("display", "block").css("word-break","break-all").css("top", wordnodeoffset.top + $(obj).height()+5 + "px").css("left", wordnodeoffset.left + "px");
  		}

3. 效果图如下：

鼠标移开时：

鼠标悬停时：

悬停在不同的表格处，显示的div位置也相应的改变：