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{ 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" />
CSS鼠标响应事件经过、移动、点击示例介绍的更多相关文章
- 3D Slicer Modify Mouse Event 修改3D Slicer中的鼠标响应事件
在3D Slicer中,我们如果想在自己写的插件中来修改默认的鼠标响应事件的话,就需要先将原有的响应事件链接删除,然后建立自定义的响应事件链接,然后将自己要实现的功能写在响应事件函数中. 比如Slic ...
- 3D场景中的鼠标响应事件
原文:3D场景中的鼠标响应事件 今天要讲的是3D场景中的鼠标响应事件的处理,首先Button的响应是大家熟知的,只要加上一个click事件,然后写一个响应的处理时间就行了.对于二维平面上的一些控件也很 ...
- JS鼠标响应事件经过、移动、点击示例介绍
原文: http://www.jb51.net/article/41124.htm onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标 ...
- cocos2d JS 鼠标响应事件
对于PC和超级本,添加鼠标事件的的处理,可以加强用户的体验,其处理逻辑与触摸事件基本一样,多了一些鼠标特有的事件响应 如滚轮事件(onMouseScroll) cc.eventManager.addL ...
- 处理鼠标响应事件（最简单控件 good）
贴下代码: #ifndef MYWIDGET_H#define MYWIDGET_H #include <QWidget>#include <QtGui>#include &l ...
- mfc 鼠标、键盘响应事件
一.基本目标 1.有一个基本的MFC程序,点击“关闭”则“关闭”这个程序,这点没什么好讲的,把自带的“取消”按钮,右键->属性的Caption改成“关闭”二字就可以了 2.鼠标在对话框中移动,则 ...
- opencv与mfc显示图片操作，MFC的鼠标响应在opencv图片上失效，opencv滚轮事件没有响应问题描述解决。
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11588758.html 用mfc 与OPENCV编写成. 出了很多冲突异常事件导致鼠标操作没有 ...
- Cocos Creator学习五：触摸和重力传感响应事件
1.移动设备上主要涉及触摸响应事件以及重力传感响应事件的处理. 事件主要分两类: 针对节点事件处理的节点响应事件cc.Node.EventType(主要是触摸响应事件和鼠标响应事件): 针对全局系统事 ...
- IE和Chrome执行javascript对鼠标双击事件的不同响应
最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能, ...
随机推荐
- 【BZOJ-1952】城市规划 [坑题] 仙人掌DP + 最大点权独立集（改）
1952: [Sdoi2010]城市规划 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 73 Solved: 23[Submit][Status][ ...
- kali 2.0 启动metasploit服务
kali 2.0 已经没有metasploit 这个服务了,所以service metasploit start 的方式不起作用. 在kali 2.0中启动带数据库支持的MSF方式如下: 首先启动po ...
- wpf配置菜单栏
WPF 内建了两种菜单——Menu 和ContextMenu(上下文菜单). 1. Menu Menu 的项可以是任何东西,但是你应该使用MenuItem 以及Separator 对象. <Me ...
- poj3502 恶心题
巨恶心的一个题::>_<:: 题意:给出航班航线和大陆,找航线上距离大陆最远的某一点距离大陆边缘的距离 标准算法:二分答案,从大陆边界向外扩展,扩展出来的面积会覆盖航线.找出航线上最后被覆 ...
- PHP解释器引擎执行流程 - [ PHP内核学习 ]
catalogue . SAPI接口 . PHP CLI模式解释执行脚本流程 . PHP Zend Complile/Execute函数接口化(Hook Call架构基础) 1. SAPI接口 PHP ...
- crawler：简要了解一下PhantomJS
有时,我们需要浏览器处理网页,但并不需要浏览,比如生成网页的截图.抓取网页数据等操作.PhantomJS的功能,就是提供一个浏览器环境的命令行接口,你可以把它看作一个“虚拟浏览器”,除了不能浏览,其他 ...
- Integrated Circuit Intro
1.Noise Margin 不管是TTL还是CMOS Logic Level,都会有门限.如,5V CMOS的VoutH > 4.4V, VoutL <0.33V;而它对应的输入电平Vi ...
- 数据结构作业——N个数中未出现的最小整数（想法题）
Description 给出一串数字,这串数字由 n 个数 ai 组成,找出未出现在这串数字中的最小正整数 Input 输入第一行为一个正整数 n (1 <= n <= 1000) 第二行 ...
- ubuntu --- shortcut key
Linux系统下图形界面与Linux命令行模式的切换的方法 由图形转换到控制台模式:ctrl+alt+f1~f6(同时按下3秒钟不要马上松开)....由控制台转向图形模式是:alt+f7 快捷键(ub ...
- 深入理解javascript中执行环境（作用域）与作用域链
深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...