高分求解<div>的问题,解决即给分!

stickking 2003-12-08 10:11:40
今天,我在做网页的过程中被一个问题整整烦了一天,其实我估计也不是什么大问题,只是本人水平太菜。问题是这样的:
<div>之中放入一个<table>是不是<div>的边界就变化了,<table>内部的或者<table>的边框就不属于<div>的范围了?我有这个感觉是因为下面一段程序:
<html>
<head><title>test</title></head>
<body>
<script language=javascript>
<!--
function mouse_outlayer(name)
{
document.all('layer1').style.visibility="hidden";
}
function showlayer()
{
document.all('layer1').style.visibility="visible";}
-->
</script>
<a href="www.csdn.net" onmouseover="showlayer()">显示</a>
<div id="layer1" style="position:absolute;width:81px;height:147px;z-index:2;left:20px;top:30px;visibility:hidden" onmouseout="mouse_outlayer('layer1')">
<table><tr><td>first</td></tr>
<tr><td>second</td></tr>
</table>
</div>
</body>
</html>
如果有谁能回答,请不吝赐教!
...全文
45 点赞 收藏 8
写回复
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
lqy661 2003-12-17

楼主的意思是不是鼠标移动到层上的时候,层依然要显示?
<html>
<head><title>test</title></head>
<body>
<script language=javascript>
<!--
function mouse_outlayer(name)
{
document.all('layer1').style.visibility="hidden";
}
function showlayer()
{
document.all('layer1').style.visibility="visible";}
-->
</script>
<a href="www.csdn.net" onmouseover="showlayer()">显示</a>
<div id="layer1" style="position:absolute;width:81px;height:147px;z-index:2;left:20px;top:30px;visibility:hidden" onmouseout="mouse_outlayer('layer1')" onmouseover="showlayer()">
<table><tr><td>first</td></tr>
<tr><td>second</td></tr>
</table>
</div>
</body>
</html>

回复
fxw 2003-12-09

在IE中


以下代码可以看出问题,(你在div区域内四处移动鼠标,弹出窗口用回车确定)
div的区域始终是它的区域,
问题出在onmouseout本身,要怪就怪javascript


<html>
<head><title>test</title></head>
<body bgcolor=#DDDDDD>

<div style="background-color:#AAAAAA;width:247px;height:147px;" onmouseout="alert(window.event.toElement.tagName)">
<table cellspacing=5 border=5 bgcolor="#666666">
<tr bgcolor="#FFFFFF"><td>first</td><td>first 2</td></tr>
<tr bgcolor="#FFFFFF"><td>second</td><td>second 2</td></tr>
</table>
</div>

</body>
</html>



解决办法


<html>
<head><title>test</title></head>
<body bgcolor=#DDDDDD>

<div style="background-color:#AAAAAA;width:247px;height:147px;"
onmouseout="if (event.toElement.tagName.toUpperCase() == 'BODY') alert('OK!')"
>
<table cellspacing=5 border=5 bgcolor="#666666">
<tr bgcolor="#FFFFFF"><td>first</td><td>first 2</td></tr>
<tr bgcolor="#FFFFFF"><td>second</td><td>second 2</td></tr>
</table>
</div>

</body>
</html>
回复
色老虫 2003-12-09
楼主您说的没错,您这种写法的却是您认为的那样,您可以把DIV中TABLE拉的很大很长试试,是不是DIV的边界也被同样拉大拉长了呢,回答是肯定的,这样事件的整个范围都变了。

第二个问题,在我这里没有发生,只有鼠标移动到DIV范围内才会激发MOUSEOUT
回复
bzscs 2003-12-09
楼主的意思是不是鼠标移动到层上的时候,层依然要显示?
<html>
<head><title>test</title></head>
<body>
<script language=javascript>
<!--
function mouse_outlayer(name)
{
document.all('layer1').style.visibility="hidden";
}
function showlayer()
{
document.all('layer1').style.visibility="visible";}
-->
</script>
<a href="www.csdn.net" onmouseover="showlayer()">显示</a>
<div id="layer1" style="position:absolute;width:81px;height:147px;z-index:2;left:20px;top:30px;visibility:hidden" onmouseout="mouse_outlayer('layer1')" onmouseover="showlayer()">
<table><tr><td>first</td></tr>
<tr><td>second</td></tr>
</table>
</div>
</body>
</html>
回复
zhfkiller 2003-12-09
<script>
function mouse_outlayer(name){
if(window.event.toElement.tagName == "BODY")
document.all('layer1').style.visibility="hidden";
}
function showlayer(){
document.all('layer1').style.visibility="visible";
}
</script>
<a href="www.csdn.net" onmouseover="showlayer()">显示</a>
<div id="layer1" style="position:absolute;width:81px;height:147px;z-index:2;left:20px;top:30px;visibility:hidden" onmouseout="mouse_outlayer('layer1')">
<table>
<tr><td>first</td></tr>
<tr><td>second</td></tr>
</table>
</div>

刚刚多了一句
回复
zhfkiller 2003-12-09
<script>
function mouse_outlayer(name){
window.status = window.event.toElement.tagName;
if(window.event.toElement.tagName == "BODY")
document.all('layer1').style.visibility="hidden";
}
function showlayer(){
document.all('layer1').style.visibility="visible";
}
</script>
<a href="www.csdn.net" onmouseover="showlayer()">显示</a>
<div id="layer1" style="position:absolute;width:81px;height:147px;z-index:2;left:20px;top:30px;visibility:hidden" onmouseout="mouse_outlayer('layer1')">
<table>
<tr><td>first</td></tr>
<tr><td>second</td></tr>
</table>
</div>
回复
zhongmao 2003-12-08
<div>的边界没有变化
你可以用onclick事件来测试一下

onmouseout Event

Fires when the user moves the mouse pointer outside the boundaries of the object.

example;


<SCRIPT>
function flipImage(url)
{
if (window.event.srcElement.tagName == "IMG" )
{
window.event.srcElement.src = url;
}
}
</SCRIPT>
</HEAD>
<BODY>
<P>Move the mouse over the image to see it switch.<P>
<IMG SRC="/workshop/graphics/prop_ro.gif"
onmouseover="flipImage('http://www.163.com/logo.gif');"
onmouseout="flipImage('http://expert.csdn.net/expert/images/rank/user1.gif');"
</BODY>

回复
stickking 2003-12-08
为什么鼠标位于<div>上还是引发了mouseout事件?
回复
发动态
发帖子
CSS
创建于2007-09-28

5.9w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
社区公告
暂无公告