CSS鼠标响应事件经过、移动、点击示例介绍

时间：2021-06-16 08:24:44|栏目：JavaScript代码|点击：次

几种鼠标触发CSS事件。
说明：
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

 
<html> 
 
<head> 
 
<title>CSS 鼠标响应事件</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>鼠标响应事件 当鼠标经过移出时切换css</h4> 
 
<li>onMouseDown 按下鼠标时触发 
 
<li>onMouseOver 鼠标经过时触发 
 
<li>onMouseUp 按下鼠标松开鼠标时触发 
 
<li>onMouseOut 鼠标移出时触发 
 
<li>onMouseMove 鼠标移动时触发 </li> 
 
</ul> 
 
</body> 
 
</html>

复制代码代码如下:

<span style="color: red;">鼠标经过表格变色样式:<br></span>

复制代码代码如下:

 
<style> 
 
table { background-color:#000000; cursor:hand; width:100%; } 
 
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> 
 
控制表格隔行变色: 
 
简单应用: 
 
<style type="text/css"> 
 
<!-- 
 
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")} 
 
--> 
 
高级应用:每个单元格变色 
 
<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>

添加CSS文件引用:

复制代码代码如下:

上一篇：bootstrap 路径导航分页进度条的实例代码

栏目：JavaScript代码

下一篇：JavaScript获取ul中li个数的方法

本文标题：CSS鼠标响应事件经过、移动、点击示例介绍

本文地址：http://www.codeinn.net/misctech/143066.html

更多JavaScript代码

JavaScript代码

CSS鼠标响应事件经过、移动、点击示例介绍

阅读排行

推荐教程