1.使用
onmouseover="this.style.backgroundColor='#000000';"
onmouseout="this.style.backgroundColor='#ffffff';"
onMouseOver="this.style.border='1px solid #CCCCCC'"
onMouseDown="this.style.border='1px solid #999999'"
onMouseUp="this.style.border='1px solid #CCCCCC'"
<!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="">
<style type="text/css">...
table
{...}{ background-color:#000000; cursor:hand;
}td{...}{ /**//*设置onmouseover事件*/ onmouseover: expression(onmouseover=function (){ this.style.borderColor ='blue'; this.style.color='red';t his.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 >1...... </TD> <TD>2...... </TD> <TD>3...... </TD></TR><TR > <TD >4...... </TD> <TD>5...... </TD> <TD>6...... </TD></TR></TABLE></BODY></HTML> 2.使用CSS定义动作:
<style type="text/css">...<!--#navcontainer ul{...}{margin: 0;padding: 0;list-style-type: none;font-family: verdana, arial, Helvetica, sans-serif;}#navcontainer li {...}{ margin: 0 0 1px 0; }#navcontainer a{...}{display: block;padding: 5px 10px;width: 140px;color: #fff;background-color: #036;text-decoration: none;}#navcontainer a:hover{...}{color: #fff;background-color: #69C;text-decoration: none;}--></style></head><body><div id="navcontainer"><ul id="navlist"><li><a href="#">主标题一</a></li><li><a href="#">主标题二</a></li><li><a href="#">主标题三</a></li><li><a href="#">主标题四</a></li></ul></div>