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

 更新时间:2013年09月04日 16:15:36   作者:   我要评论
本文为大家介绍下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{ 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" />

相关文章

  • Base64(二进制)图片编码解析及在各种浏览器的兼容性处理

    Base64(二进制)图片编码解析及在各种浏览器的兼容性处理

    这篇文章主要介绍了Base64(二进制)图片编码解析及在各种浏览器的兼容性处理,需要的朋友可以参考下
    2017-02-02
  • js中this用法实例详解

    js中this用法实例详解

    这篇文章主要介绍了js中this用法,实例分析了this指向windows、指向对象及改变this指向的相关技巧,需要的朋友可以参考下
    2015-05-05
  • javascript上传图片前预览图片兼容大多数浏览器

    javascript上传图片前预览图片兼容大多数浏览器

    上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下
    2013-10-10
  • 正则表达式替换html元素属性的方法

    正则表达式替换html元素属性的方法

    下面小编就为大家带来一篇正则表达式替换html元素属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • javascript支持IE和firefox(FF)的渐变透明效果

    javascript支持IE和firefox(FF)的渐变透明效果

    DataThis可以发送任何标签,这个标签没有ID也可以,因为用的是自定义属性。
    2008-10-10
  • 使用webpack搭建pixi.js开发环境

    使用webpack搭建pixi.js开发环境

    这篇文章主要介绍了使用webpack搭建pixi.js开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Javascript继承机制的设计思想分享

    Javascript继承机制的设计思想分享

    我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。
    2011-08-08
  • JavaScript对象反射用法实例

    JavaScript对象反射用法实例

    这篇文章主要介绍了JavaScript对象反射用法,实例分析了反射DOM对象和自定义对象的具体用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • Javascript实现动态菜单添加的实例代码

    Javascript实现动态菜单添加的实例代码

    在注册信息的时候,常常需要通过下拉菜单让用户选择,而且希望用户在第一个下拉框做的选择,影响第二个下拉框的内容。有时候,如果第一个下拉框不作出选择,第二个下拉框根本不会页面上显示,为了给用户呈现一个更清晰的页面。
    2013-07-07
  • layer弹出层全屏及关闭方法

    layer弹出层全屏及关闭方法

    今天小编就为大家分享一篇layer弹出层全屏及关闭方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论