在jsp页面中的某一个table中,在某一列的每个td上,鼠标放在每个td上,都会弹出一个对话框,鼠标移开对话框消失,我实现了,但是还是有一些问题。
本帖最后由 Henry_YQH 于 2013-07-24 18:22:50 编辑 我先把我的代码贴出来,然后说一下问题!
这是jsp页面的那一列
<table class="table-css">
<s:if test="data==null || data.isEmpty()">
<tr class="list-row-even">
<td style="width:1070px">There is not data what you wanted!</td>
</tr>
</s:if>
<s:else>
<s:iterator value="data" id="date1" status="st">
<s:if test="#st.index%2==0">
<tr class="list-row-even">
<td style="width:130px"><s:property value="date" /></td>
<td style="width:150px"><s:property value="time" /></td>
<td style="width:88px"><s:property value="userip" /></td>
<td style="width:120px"><s:property value="servclass" /></td>
<td style="width:64px"><s:property value="serverip" /></td>
<td style="width:90px"><s:property value="gotoclass" /></td>
<td id="text1Id" style="width:195px" onmouseover="showDiv(this)" onmouseout="hideDiv(this)">更多字段
<div class="hideDiv">
<table class="hideTable">
<tr ><td> test1=<s:property value="test1" /> </td></tr>
<tr ><td> test2=<s:property value="test2" /> </td></tr>
<tr ><td> test3=<s:property value="test3" /> </td></tr>
<tr ><td> test4=<s:property value="test4" /> </td></tr>
<tr ><td> test5=<s:property value="test5" /> </td></tr>
</table>
</div></td>
<td></td>
</tr>
</s:if>
<s:else>
<tr class="list-row-odd">
<td style="width:130px"><s:property value="date" /></td>
<td style="width:150px"><s:property value="time" /></td>
<td style="width:88px"><s:property value="userip" /></td>
<td style="width:120px"><s:property value="servclass" /></td>
<td style="width:64px"><s:property value="serverip" /></td>
<td style="width:90px"><s:property value="gotoclass" /></td>
<td id="text1Id" style="width:195px" onmouseover="showDiv(this)" onmouseout="hideDiv(this)">更多字段
<div alt="在jsp页面中的某一个table中,在某一列的每个td上,鼠标放在每个td上,都会弹出一个对话框,鼠标移开对话框消失,小弟我实现了,但是还是有一些有关问题" />
2.在火狐浏览器下,当弹出窗出现的时候,鼠标可以自己的在弹出窗里面移动,并且不会促发,下一个td鼠标事件。
但是在ie和谷歌浏览器下,鼠标是不能在弹出窗中移动的,每当移到下一个td所在的位置,会促发td鼠标事件,并且弹出窗的位置也会随之变化。
[解决办法]
}
if(top1>=400){
hideDiv.css({top:top1-280,left:offset.left+80});
}
if((top1>=300)&&(top1<400)){
hideDiv.css({top:top1-160,left:offset.left+80});
}
}else{
if(top1-top2<=300){
hideDiv.css({top:top1,left:offset.left+80});
}
if((top1-top2<360)&&(top1-top2>300)){
hideDiv.css({top:top1-280,left:offset.left+80});
}
if(top1-top2>=360){
hideDiv.css({top:top1-320,left:offset.left+80});
}
}
hideDiv.show();
},function(){
var hideDiv=$(this).children("div").eq(0);
hideDiv.hide();
});建议楼主用hover 这样在每个子元素一下移动的时候,不算是一次mouseout