.
.
.
.
鼠标悬浮的时候改变文本框和按钮的颜色、背景图片以及链接文字的大小。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS控制CSS</title> <style type="text/css"> <!-- .txtTest { height: 15px; 200px; border: thin dashed #0000FF; } .txtOutTest { height: 15px; 200px; border: thin dashed #FF6600; } .btnSub { background-image:url(back1.jpg); height: 23px; 82px; border:0; } --> </style> <script> var tmr; function Over(){ document.getElementById("btnSub").style.backgroundImage="url('back2.jpg')"; clearTimeout(tmr); } function Out(){ document.getElementById("btnSub").style.background="url('back1.jpg')"; Overs(); } function Overs(){ document.getElementById("btnSub").style.backgroundImage="url('back1.jpg')"; tmr = setTimeout("Outs();",500); } function Outs(){ document.getElementById("btnSub").style.background="url('back2.jpg')"; tmr = setTimeout("Overs()",500); } </script> </head> <body> <p><a href="#" style="font-size:12px;" onmouseover="this.style.fontSize='36px';" onmouseout="this.style.fontSize='12px';">这个链接可以改变大小</a></p> <p> <input name="textfield" type="text" class="txtTest" id="txtTest" onmouseover="this.className='txtOutTest'" onmouseout="this.className='txtTest'" /> </p> <p> <input id="btnSub" type="button" class="btnSub" value="按钮" onmouseover="Over()" onmouseout="Out()" /> </p> </body> </html>