87,914
社区成员
发帖
与我相关
我的任务
分享
<style>
ul{
list-style-type: none;
}
ul li{
display: block;
height: 30px;
width: 40px;
background-color: #333366;
}
#odiv {
width:200px;
height:100px;
border: 2px solid #D0D0D0;
background-color:#fff;
position:absolute;
display:none;
}
</style>
<script type="text/javascript">
<!--
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
var CancelBubble = function(e){
var e = e || window.event;
try{
e.cancelBubble = true;
}catch(ex){
try{
e.stopPropagation();
}catch(e){}
}
}
var getTarget = function(e){
return e.srcElement || e.target;
}
var absPosition = function(element){
var iTop = iLeft = 0;
do{
iTop += element.offsetTop;
iLeft += element.offsetLeft;
}while(element = element.offsetParent);
return {'x': iLeft, 'y': iTop};
}
function showTip(e){
CancelBubble(e);
var e = e || window.event
var otarget = getTarget(e);
$("odiv").style.display = "block";
with($("odiv").style){
display="block";top=(absPosition(otarget).y + otarget.offsetHeight)+"px";left=absPosition(otarget).x+"px";
}
document.onmouseover = function(){
$("odiv").style.display = "none";
document.onmouseover = null;
}
$("odiv").onmouseover = function(e){
var e = e || window.event;
CancelBubble(e);
}
}
//-->
</script>
<ul>
<li onmouseover="showTip(event);"></li>
</ul>
<div id="odiv">
<a href="http://www.baidu.com" target="_blank">baidu</a>
</div>
就是CSDN用户头像这样吧.. 头像onmouseover事件弹出DIV,document.onmouseover隐藏DIV,并且阻止
头像的onmouseover和DIV的onmouseover事件冒泡.
echo '<td align="center" onmouseover="showTip(event) bgcolor="#FFFFFF" width="30"><font color=red>OFF</font></td>';
if ($status_all[$i] == '1')
echo '<td align="center" bgcolor="#FFFFFF" width="30"> </td>';
else
echo '<ul><td align="center" bgcolor="#FFFFFF" width="30"><font color=red><li onmouseover="showTip(event);">OFF</li></font></td></ul>';
#odiv {
width:200px;
height:100px;
border: 2px solid #D0D0D0;
background-color:#fff;
position:absolute;
display:none;
z-index:100; /*这个css属性加上试下*/
}
<ul>
<li onmouseover="showTip(event);"> OFF </li>
</ul>
//你可以把你这个表格的那个单元格 绑定这个onmouseover="showTip(event);"事件