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 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
解决vue自定义全局消息框组件问题
Nov 22 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php实现aes加密类分享
2014/02/16 PHP
php遍历目录方法小结
2015/03/10 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
Django 中 cookie的使用
2017/08/17 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
限制文本字节数js代码
2007/03/06 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python安装与使用redis的方法
2016/04/19 Python
Python 私有函数的实例详解
2017/09/11 Python
python保存网页图片到本地的方法
2018/07/24 Python
python实现随机漫步算法
2018/08/27 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
年度考核自我鉴定
2013/11/09 职场文书
工作自我评价分享
2013/12/01 职场文书
小学英语教学反思案例
2014/02/04 职场文书
简历里的自我评价范文
2014/02/24 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
个人租房协议书
2014/04/09 职场文书
软件项目实施计划书
2014/05/02 职场文书
小学生校园广播稿
2014/09/28 职场文书
大学生毕业个人总结
2015/02/15 职场文书
毕业设计致谢词
2015/05/14 职场文书