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 相关文章推荐
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 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
php的access操作类
2008/04/09 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
浅析Python中signal包的使用
2015/11/13 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Python 线程池用法简单示例
2019/10/02 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python能否java成为主流语言吗
2020/06/22 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
中学生寄语大全
2014/04/03 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
培训研修方案
2014/06/06 职场文书
内勤岗位职责范本
2015/04/13 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
python实现Nao机器人的单目测距
2021/09/04 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python