div不能触发事件？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>demo</title>
</head><body><div id="personalMessage" style="position:absolute; width:221px; height:625px; z-index:1; left: 274px; top: 71px; overflow: hidden;background-color:yellow">
</div>
 
<div id="suolue" style="position:absolute; width:440px; height:141px; z-index:1; left: 572px; top: 45px;  border: 1px none #000000;;background-color:pink">
</div>
<div id="mainDesign" style="top:207px; left:519px; width:588px; height:493px; color: #00FFFF; position:absolute"> <div id="contralTool" style="position:absolute; width:492px; height:28px; z-index:3; left: 38px; top: 39px; background-color: #C3DBFD; layer-background-color: #C3DBFD; border: 1px none #000000;">
</div>
<div id="addElement" style="position:absolute; width:492px; height:24px; z-index:4; left: 38px; top: 67px; background-color: #C3DBFD; layer-background-color: #C3DBFD; border: 1px none #000000;">
</div>
<div id="front" style="position:absolute; width:500px; height:288px; z-index:5; left: 28px; top: 142px; border: 1px none #000000;overflow:hidden">
</div></div>
<script type="text/javascript">
var front = document.getElementById('front');for(var i=0;i<5;i++)
{
var div = createDiv(i);
front.appendChild(div);
}function createDiv(i)
{
var div = document.createElement("div");
div.id = i
div.style.width =300+ "px";
div.style.height = 15  + "px";
div.style.position = "absolute";
div.style.top = 100+i*10 + "px";
div.style.left = 100+i*10+ "px";


div.onmouseover = listenerPrompt;
div.onmouseout = cancelPrompt;
return div;
}function listenerPrompt()
{
this.style.border = "dashed 1px blue";
this.style.cursor = "move";
}function cancelPrompt()
{
this.style.border = "dashed 0px blue";
this.style.cursor = "move";
}
</script>
</body>
</html>我给front这个div加了几个子div，这些子div有onmouseover跟onmouseout事件。鼠标过div时就出现边框，离开边框就消失，但是按照上面的代码，根本不会触发事件，但是如果给front这个div加上一个背景色，或者给子div本身加上背景色，那就可以正确的触发事件了，这是怎么回事呢？怎么样能让不加背景色也可以正常触发事件呢？

解决方案 »

  1.   

    不加背景色，div中有内容也可以
      

  2.   

    div.innerHTML="div";   
      

  3.   

    不给div里加内容有解决办法吗？
      

  4.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>demo</title>
    </head><body><div id="personalMessage" style="position:absolute; width:221px; height:625px; z-index:1; left: 274px; top: 71px; overflow: hidden;background-color:yellow">
    </div>
     
    <div id="suolue" style="position:absolute; width:440px; height:141px; z-index:1; left: 572px; top: 45px;  border: 1px none #000000;;background-color:pink">
    </div>
    <div id="mainDesign" style="top:207px; left:519px; width:588px; height:493px; color: #00FFFF; position:absolute"> <div id="contralTool" style="position:absolute; width:492px; height:28px; z-index:3; left: 38px; top: 39px; background-color: #C3DBFD; layer-background-color: #C3DBFD; border: 1px none #000000;">
    </div>
    <div id="addElement" style="position:absolute; width:492px; height:24px; z-index:4; left: 38px; top: 67px; background-color: #C3DBFD; layer-background-color: #C3DBFD; border: 1px none #000000;">
    </div>
    <div id="front" style="position:absolute; width:500px; height:288px; z-index:5; left: 28px; top: 142px; border: 1px none #000000;overflow:hidden;background-color:pink">
    </div></div>
    <script type="text/javascript">
    var front = document.getElementById('front');
    var img = createImg("13.png");
    front.appendChild(img);for(var i=0;i<5;i++)
    {
    var div = createDiv(i);
    front.appendChild(div);
    }function createDiv(i)
    {
    var div = document.createElement("div");
    div.id = i
    div.style.width =300+ "px";
    div.style.height = 15  + "px";
    div.style.position = "absolute";
    div.style.top = 100+i*10 + "px";
    div.style.left = 100+i*10+ "px";


    div.onmouseover = listenerPrompt;
    div.onmouseout = cancelPrompt;
    return div;
    }function listenerPrompt()
    {
    this.style.border = "dashed 1px blue";
    this.style.cursor = "move";
    }function cancelPrompt()
    {
    this.style.border = "dashed 0px blue";
    this.style.cursor = "move";
    }function createImg(src)
    {
    var img = new Image();
    img.src = src;
    img.style.top = 0;
    img.style.left = 0;
    img.style.position = "absolute";
    return img;}
    </script>
    </body>
    </html>
    我就给div加上背景色，是可以了，但是我给front div里放了一张图片，就又不行了，到底是怎么回事呢？
      

  5.   

    是在ie下不行，在firefox下就没有问题