Several mouse triggers for CSS events.
Description
OnMouseDown when the mouse is pressed
Trigger when OnMouseOver mouse passes
OnMouseUp press the mouse to release the mouse when it triggers
onmouseout when mouse moves out
OnMouseMove when the mouse is moving
Copy Code code as follows:
<TITLE>CSS Mouse Response Event </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style type= "Text/css" >
. off{background-color: #00FF66; padding:100px;}
. Up{background-color: #FF0000; padding:100px}
</style>
<body>
<ul class=off onmouseout= "this.classname=" "onmouseover=" this.classname= "Up" >
<li>onmousedown when the mouse is pressed
Trigger when <li>onmouseover mouse passes
<li>onmouseup press the mouse to release the mouse when it triggers
<li>onmouseout when mouse moves out
<li>onmousemove when mouse moves </li>
</ul>
</body>
Copy Code code as follows:
<span style= "color:red;" > Mouse through table color style:<br></span>
Copy Code code as follows:
<style>
Table {background-color: #000000; cursor:hand; width:100%;}
TD {
/* Set onmouseover Event * *
Onmouseover:expression (Onmouseover=function () {this.style.borderColor = ' blue '; this.style.color= ' red '; This.style.backgroundColor = ' Yellow '});
/* Set onmouseout Event * *
Onmouseout:expression (Onmouseout=function () {this.style.bordercolor= '; this.style.color= '; This.style.backgroundColor = '} ');
Background-color: #ffffff;
}
</style>
Control the form to color interlacing:
Simple application:
<style type= "Text/css" >
<!--
TR {background-color:expression (this.sectionrowindex%2==0)? #E1F1F1 ": #F0F0F0")}
-->
Advanced application: Color per cell
<style type= "Text/css" >
<!--
TR {background-color:expression (this.sectionrowindex%2==0)? Red ": Blue")}
TD {Background-color:expression (this.cellindex%2==0)? "":( (this.parentelement.sectionrowindex%2==0)? " Green ":" Yellow ")}
-->
</style>
To add a CSS file reference:
Copy Code code as follows:
<link id= "CSSStyle" "rel=" stylesheet "type=" Text/css "href=". /style.css "/>
