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


Posted in Javascript onSeptember 04, 2013

几种鼠标触发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文件引用:
<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />
Javascript 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
多种方式实现js图片预览
Dec 12 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
Puppet的一些技巧
Sep 17 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 #Javascript
javascript 获取图片尺寸及放大图片
Sep 04 #Javascript
jQuery遍历Form示例代码
Sep 03 #Javascript
JS将秒换成时分秒实现代码
Sep 03 #Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 #Javascript
js综合应用实例简单的表格统计
Sep 03 #Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
很可爱的输入框
2008/08/03 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
学习python处理python编码问题
2011/03/13 Python
使用python实现接口的方法
2017/07/07 Python
EM算法的python实现的方法步骤
2018/01/02 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
数据库面试要点基本概念
2013/10/31 面试题
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
企业道德讲堂实施方案
2014/03/19 职场文书
2014国庆节标语口号
2014/09/19 职场文书
检讨书1000字
2014/10/11 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
摩登时代观后感
2015/06/03 职场文书
禁毒主题班会教案
2015/08/14 职场文书
2016入党心得体会范文
2016/01/06 职场文书
Python使用永中文档转换服务
2022/05/06 Python