如何在CSS樣式中利用expression實現JavaScript中的onmouseover/onm

2024-07-11 08:20:09

字體：大中小

來源：轉載

供稿：網友

如何在CSS樣式中利用expression實現javascript中的onmouseover/onmouseout事件

/*當鼠標移動到這里(比如表格里的一行)的時候背景色變化為黃色*/
onmouseover: expression(onmouseover=function (){this.style.backgroundColor ='yellow'});

/*當鼠標移動到這里的時候背景色還原為原來的顏色*/
onmouseout: expression(onmouseout=function (){this.style.backgroundColor =''});

下面的實例在CSS樣式表里使用onmouseover/onmouseout事件;當移動到單元格的時候該單元格的背景色/邊框/文字顏色將改變。根據需要可以加入其它的屬性,實現一些簡單的網頁特效。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> CSS樣式里使用javascript(onmouseover/onmouseout)2</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

background-color:#000000;
cursor:hand;
}

td
{
/*設置onmouseover事件*/
onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});

/*設置onmouseout事件*/
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
</style>
</HEAD>

<BODY>
<TABLE cellspacing='1px' border='1'>
<TR>
<TD>風兒吹散了蒲公英......    </TD>
<TD>風兒吹散了蒲公英......   </TD>
<TD>風兒吹散了蒲公英......   </TD>
</TR>
<TR>
<TD>風兒吹散了蒲公英......    </TD>
<TD>風兒吹散了蒲公英......   </TD>
<TD>風兒吹散了蒲公英......   </TD>
</TR>
</TABLE>
</BODY>
</HTML>

相關連接：
1.CSS中expression使用簡介

2.expression的應用之 -- 用CSS做出雙色相間表格

上一篇：常用CSS縮寫語法總結

下一篇：CSS中expression使用簡介