5.9w+
社区成员
- 主页
- 问答
高分求解<div>的问题，解决即给分！
今天，我在做网页的过程中被一个问题整整烦了一天，其实我估计也不是什么大问题，只是本人水平太菜。问题是这样的：
<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>
如果有谁能回答，请不吝赐教！
<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>
如果有谁能回答，请不吝赐教！
...全文
请发表友善的回复…
发表回复
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
第二个问题，在我这里没有发生，只有鼠标移动到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>
<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>
刚刚多了一句
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>
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>
你可以用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事件？