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

更新时间：2013年09月04日 16:15:36 作者：

本文为大家介绍下CSS 鼠标响应事件：鼠标经过CSS、鼠标移动CSS、鼠标点击CSS以及示例，喜欢的朋友可以参考下

几种鼠标触发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文件引用:

复制代码代码如下:

您可能感兴趣的文章:

input禁止键盘及中文输入,但可以点击
这篇文章主要介绍了<input>禁止键盘及中文输入,但可以点击。需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
JS+Canvas实现接球小游戏的示例代码
本文主要为大家详细介绍了如何利用JS+Canvas实现接球小游戏，文中的示例代码讲解详细，对我们学习有一定的帮助，感兴趣的小伙伴可以了解一下
2022-06-06
bootstrap Table插件使用demo
本篇文章主要介绍了bootstrap Table插件使用demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JS实现动态倒计时功能（天数、时、分、秒）
这篇文章主要介绍了JS实现动态倒计时功能详解（天数、时、分、秒）,需要的朋友可以参考下
2019-12-12
css+html+js实现五角星评分
这篇文章主要为大家详细介绍了css+html+js实现五角星评分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vsCode安装使用教程和插件安装方法
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器。这篇文章主要介绍了vsCode安装使用教程和插件安装方法,需要的朋友可以参考下
2018-11-11
js 走马灯简单实例
这篇文章主要介绍了js 走马灯简单实例，有需要的朋友可以参考一下
2013-11-11
基于js实现抽红包并分配代码实例
这篇文章主要介绍了基于js实现抽红包并分配代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript实现全选和全不选操作
这篇文章主要为大家详细介绍了JavaScript实现全选和全不选操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
js调用父框架函数与弹窗调用父页面函数的简单方法
下面小编就为大家带来一篇js调用父框架函数与弹窗调用父页面函数的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11