鼠标应用事件this.className详解

onmouseover与onmouseout事件处理器，分别对应为鼠标移上去和鼠标移开时触发。

onmouseover=”this.className=’class1′;” 是鼠标移到该单元格上去时应用的css样式为“.class1”的样式 

onmouseout=”this.className=’class2′;”是鼠标离开单元格后应用的css样式为“.class2”的样式 

附带一例子 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>鼠标应用事件this.className详解</title> 
</head> 
<style type="text/css"> 
   .class1{ width:400px; height:30px; margin:0 auto; background:#33CC99; color:#FFFFFF; text-align:center; line-height:30px}
   .class2{ width:400px; height:30px; margin:0 auto; background:#f60; color:#FFFFFF;  text-align:center; line-height:30px}
</style> 
<body> 
<p class="class1" onmouseover="this.className='class2'" onmouseout="this.className='class1'"> 
鼠标应用事件this.className详解
</p> 
</body> 
</html>

金牌狙击手

52html5是一个web前端|html5资源平台，为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等，并涉及css3、javascript前端知识。