CSS mouse response event process, movement, click example introduction

Home

Web Front-end

JS Tutorial

CSS mouse response event process, movement, click example introduction_javascript skills

May 16, 2016 pm 05:23 PM

css

Several types of mouse trigger CSS events.
Description:
onMouseDown triggers when the mouse is pressed
onMouseOver triggers when the mouse passes over
onMouseUp triggers when the mouse is pressed and released
onMouseOut triggers when the mouse moves out
onMouseMove triggers when the mouse moves

Copy code The code is as follows:

 
<html> 
<head> 
<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> ; 
</head> 
<body> 
<ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className='Up'"> 
<h4>Mouse response event switches css when the mouse moves out</h4> 
<li>onMouseDown triggers when the mouse is pressed
<li>onMouseOver triggers when the mouse passes
< li>onMouseUp Triggers when the mouse is pressed and released
<li>onMouseOut Triggers when the mouse moves out
<li>onMouseMove Triggers when the mouse moves</li> 
</ul> 
</body> 
</html> 

Copy code The code is as follows:

 
<span style="color: red;">Change color style when the mouse passes over the table:<br></span> 

Copy code The code is 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 color change of every other row in the table: 
Simple application: 
<style type="text/css"> 
<!-- 
tr {background-color:expression((this.sectionRowIndex%2==0)?" #E1F1F1":"#F0F0F0")} 
--> 
Advanced application: each cell changes color
<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> 

Add CSS file reference:

Copy code The code is as follows:

< link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn