鼠标移入table的一列上的某个td的时候在鼠标旁边显示一个div做展示

Question

如题在下图画椭圆的td,当鼠标移入的时候在鼠标旁边显示一个div做一些展示的 内容 js如何实现?

Answer 1

<style>
#ooo{position:relative;}
#ooo .tips{width:100px;height:50px; position:absolute;top:0;left:100px;display:none;}
#ooo:hover .tips{display:block;}
</style>
<table>
<tr>
<td width="100" id="ooo">
xxxx
<div class="tips">鼠标移到TD显示</div>
</td>
</tr>
</table>

用:hover来实现就可以了，当然IE6就只支持a:hover，其实不支持，，这里先不考虑IE6，，考虑全兼容的话，可以用JQ来实现。

Answer 2

先定义一个DIV，把你要提示的内容，放到这个DIV中

<div id="divInfo" style="visibility:hidden;">

<p>向上增加一行</p><br/>

<p>修改此行</p><br/>

<p>向下增加一行</p>

</div>

代码：

$("table tr").mouseover(function(){

$("#divInfo").css("z-index",999);//让层浮动

$("#divInfo").css("top",this.top+行高);//设置提示div的位置

$("#divInfo").css("left",11);

$("#divInfo").css("visibility","visible");

})

Answer 3

先定义一个DIV，把你要提示的内容，放到这个DIV中
<div id="divInfo" style="visibility:hidden;">
<p>向上增加一行</p><br/>

<p>修改此行</p><br/>

<p>向下增加一行</p>

</div>
代码：
$("table tr").mouseover(function(){
$("#divInfo").css("z-index",999);//让层浮动

$("#divInfo").css("top",this.top+行高);//设置提示div的位置

$("#divInfo").css("left",11);

$("#divInfo").css("visibility","visible");
})
就行了