本文为大家介绍下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{ 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鼠标响应事件经过、移动、点击示例介绍的更多相关文章

  1. 3D Slicer Modify Mouse Event 修改3D Slicer中的鼠标响应事件

    在3D Slicer中,我们如果想在自己写的插件中来修改默认的鼠标响应事件的话,就需要先将原有的响应事件链接删除,然后建立自定义的响应事件链接,然后将自己要实现的功能写在响应事件函数中. 比如Slic ...

  2. 3D场景中的鼠标响应事件

    原文:3D场景中的鼠标响应事件 今天要讲的是3D场景中的鼠标响应事件的处理,首先Button的响应是大家熟知的,只要加上一个click事件,然后写一个响应的处理时间就行了.对于二维平面上的一些控件也很 ...

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

    原文: http://www.jb51.net/article/41124.htm onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标 ...

  4. cocos2d JS 鼠标响应事件

    对于PC和超级本,添加鼠标事件的的处理,可以加强用户的体验,其处理逻辑与触摸事件基本一样,多了一些鼠标特有的事件响应 如滚轮事件(onMouseScroll) cc.eventManager.addL ...

  5. 处理鼠标响应事件（最简单控件 good）

    贴下代码: #ifndef MYWIDGET_H#define MYWIDGET_H #include <QWidget>#include <QtGui>#include &l ...

  6. mfc 鼠标、键盘响应事件

    一.基本目标 1.有一个基本的MFC程序,点击“关闭”则“关闭”这个程序,这点没什么好讲的,把自带的“取消”按钮,右键->属性的Caption改成“关闭”二字就可以了 2.鼠标在对话框中移动,则 ...

  7. opencv与mfc显示图片操作，MFC的鼠标响应在opencv图片上失效，opencv滚轮事件没有响应问题描述解决。

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11588758.html 用mfc 与OPENCV编写成. 出了很多冲突异常事件导致鼠标操作没有 ...

  8. Cocos Creator学习五：触摸和重力传感响应事件

    1.移动设备上主要涉及触摸响应事件以及重力传感响应事件的处理. 事件主要分两类: 针对节点事件处理的节点响应事件cc.Node.EventType(主要是触摸响应事件和鼠标响应事件): 针对全局系统事 ...

  9. IE和Chrome执行javascript对鼠标双击事件的不同响应

    最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能, ...

随机推荐

  1. Restful api介绍

    网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...

  2. ( 译、持续更新 ) JavaScript 上分小技巧(二)

    考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...

  3. 大一上学期C语言学习心得总结

    经过一个学期的C语言学习,大体算是在这个编程语言上入了门,能够通过一些代码解决特定的问题.当然,每次成功将问题转换成代码都小有激动,虽然只是在黑框上输出了一些数字或是字符串. 编程,虽然还不是很懂,但 ...

  4. Yocto开发笔记之《网卡配置》（QQ交流群：519230208）

    QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ # ifconfig -a # ...

  5. BZOJ1972: [Sdoi2010]猪国杀

    “此题注意样例少了个J,且牌堆可能用完牌,若牌用完则不停取最后一张”.——hzwer 然后直接模拟,认真读题,理清思路. #include<cstdio> #include<list ...

  6. 使用Java中的动态代理实现数据库连接池

    2002 年 12 月 05 日 作者通过使用JAVA中的动态代理实现数据库连接池,使使用者可以以普通的jdbc连接的使用习惯来使用连接池. 数据库连接池在编写应用服务是经常需要用到的模块,太过频繁的 ...

  7. 自然语言15_Part of Speech Tagging with NLTK

    https://www.pythonprogramming.net/part-of-speech-tagging-nltk-tutorial/?completed=/stemming-nltk-tut ...

  8. 9月27日Bootstrap

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.Bootstrap ...

  9. DllImport dll中有些啥函数 及 dll中是否用到了别的dll

    在加载dll的时候不知道dll中有哪些接口怎么办,或者使用别人封装的东西时报出类似于“无法在 DLL“XXX.dll”中找到名为“XXX函数”的入口点.”     1.通过LordPE这个软件来看dl ...

  10. FBX .NET

    https://github.com/returnString/ManagedFBX http://fbx.codeplex.com/ http://code.openhub.net/project? ...