onmouseover/out与div的问题

weoln 2008-05-24 11:30:36

我在div中设置了onmouseover属性，当鼠标移动到div中的input框之间的区域时，又会再次触发onmouseover，网上有两种方法，一种是延时触发，一种是用onmouseenter代替，但这两种方式都不是很好,请教各位大侠，有没有什么比较好的方法解决？



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

 </HEAD>

<style type="text/css">

.divClass{

   /*设置onmouseover事件*/

  onmouseover: expression(onmouseover=function (){

  this.style.borderColor ='blue';

  this.style.color='red';this.style.backgroundColor ='yellow'



   var inputs = this.getElementsByTagName("input");

    for(i=0;i<inputs.length;i++){

      if(inputs[i].type=='button'){

        inputs[i].style.display="inline";

      }

    }

  }



  );



  /*设置onmouseout事件*/

  onmouseout: expression(onmouseout=function (){



  this.style.borderColor='';this.style.color='';this.style.backgroundColor =''

   var inputs = this.getElementsByTagName("input");

    for(i=0;i<inputs.length;i++){

      if(inputs[i].type=='button'){

        inputs[i].style.display="none";

      }

    }



  });

  background-color:#ffffff;



}



</style>



<SCRIPT LANGUAGE="JavaScript">

  //增加节点

  function addNode(index){

    var mainDiv = document.getElementById("mainDiv");



    index = parseInt(index)+1;

    var num = index+1;

    var newNode = document.createElement('div');

    newNode.id="div"+num;

    newNode.setAttribute("className","divClass");//为节点设置class



    var html = num+".<input TYPE='text' NAME='t1'> "

    +"<input TYPE='text'  NAME='t2'> "

    +"<input TYPE='button'  style='display:none' id='insert"+num+"' value='增加' onClick='addNode("+num+")'   > "

    +"<input TYPE='button'  style='display:none' id='delete"+num+"' value='删除' onClick='deleteNode("+num+")'>";



    newNode.innerHTML = html;



    oldNode = document.getElementById("div"+index);

    mainDiv.insertBefore(newNode,oldNode);

  }



  //删除节点

  function deleteNode(index){

     var mainDiv = document.getElementById("mainDiv");

     var killNode = document.getElementById("div"+index);

     mainDiv.removeChild(killNode);

  }



</SCRIPT>



 <BODY>

  <FORM METHOD=POST ACTION="">

  <div id=mainDiv>

   <div id=div1 class=divClass >

   <p>请将鼠标移动到项目列表上。

    1.<INPUT TYPE="text" NAME="t1">

    <INPUT TYPE="text" NAME="t2">

    <INPUT TYPE="button" style="display:none" id="insert1" value="增加" onClick="addNode(1)"   >

    <INPUT TYPE="button" style="display:none" id="delete1" value="删除" onClick="deleteNode(1)">

	</p>

   </div>

   <div id=div2  class=divClass>

    2.<INPUT TYPE="text" NAME="t1" >

    <INPUT TYPE="text" NAME="t2">

    <INPUT TYPE="button" style="display:none" id="insert1" value="增加" onClick="addNode(2)"   >

    <INPUT TYPE="button" style="display:none" id="delete1" value="删除" onClick="deleteNode(2)">

   </div>

   <div id=div3  class=divClass>

    3.<INPUT TYPE="text" NAME="t1">

    <INPUT TYPE="text" NAME="t2">

    <INPUT TYPE="button" style="display:none" id="insert1" value="增加" onClick="addNode(3)"   >

    <INPUT TYPE="button" style="display:none" id="delete1" value="删除" onClick="deleteNode(3)">

   </div>

 </div>

    <INPUT TYPE="button" id="ok" value="提交" onClick="showMsg()">

  </FORM>

 </BODY>

</HTML>