发新话题
打印

(关于onMouseOver、onMouseOut、onClick后的动作)请问这个效果如何实现?

(关于onMouseOver、onMouseOut、onClick后的动作)请问这个效果如何实现?

有两个单元格(tr),命名为tr_A和tr_B,初始的时候,tr_B的背景色为red,tr_A的背景色为white,要求实现如下效果:  
1.当鼠标移动到tr_A时(onMouseOver):tr_A的背景色变为balck;  
2.当鼠标离开tr_A时(onMouseOut):tr_A的背景色变为white;  
3.当鼠标点击tr_A时(onClick):tr_A的背景色变成red,而tr_B的背景色变成white;并且鼠标再次移动到tr_A时,背景色不变,直到tr_B被点击后才会再继续变色。  

以上步骤要求能循环实现,请问如何编写js?谢谢各位!

TOP

这个还没有写完善,你可以加工一下。  
对于第三点,你可以设置一个全局变量做为标志。  
以下可以做为参考  
<HTML>  
<HEAD>  
<TITLE>  New  Document  </TITLE>  
<META  NAME="Generator"  CONTENT="EditPlus">  
<meta  http-equiv="Content-Language"  content="zh-cn">  
<meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">  
<SCRIPT  LANGUAGE="JavaScript">  
<!--  
function  test1(obj)  
{  
     obj.bgColor="#000000";  
}  
function  test2(obj)  
{  
     obj.bgColor="#ffffff";  
}  
function  test3(obj)  
{  
     alert("aa");  
     obj.bgColor="#ff0000";  
     document.all.tr_b.bgColor="#ffffff"  
}  
//-->  
</SCRIPT>  
</HEAD>  
<BODY>  
<table>  
   <tr  id="tr_a"  bgColor="blue"  onmouseover="test1(this)"  onmouseout="test2(this)"  onclick="test3(this)"  style="cursor:hand">  
   <td>aaaaaaaaaaaaaaa</td></tr>  
   <tr  id="tr_b"  style="cursor:hand"><td>bbbbbbbbbbbbbbbbbb</td></tr>  
</table>  
</BODY>  
</HTML>  
---------------------------------------------------------------  

<script>  
function  Mover(go){go.bgColor="#ebe9e0";}  
function  Mout1(come){come.bgColor="#ffffff";}  
function  Mout2(come){come.bgColor="#e9f4ff";}  
</script>  

<  td  bgColor="#e9f4ff"  onmouseover="javascript:Mover(this)"  onmouseout="Mout2(this)">baisun</td>

TOP

发新话题