脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → CSS鼠标响应事件

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" />
您可能感兴趣的文章:

相关文章

  • 相册展示PhotoSwipe.js插件实现

    相册展示PhotoSwipe.js插件实现

    这篇文章主要为大家详细介绍了相册展示PhotoSwipe.js插件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 基于node.js的快速开发透明代理

    基于node.js的快速开发透明代理

    服务器端js（Server-Side Javascrpt）很早也就有了，JAVA中也有javascript 的script引擎。
    2010-12-12
  • js中toString()和String()区别详解

    js中toString()和String()区别详解

    本文主要介绍了js中toSring()和Sring()的区别。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript解决跨域的三种方法小结

    JavaScript解决跨域的三种方法小结

    在Web应用中,当一个网页的脚本试图去请求另一个域名下的资源时,就会遇到跨域问题,跨域问题是由浏览器的同源策略所引起的,本文给大家介绍了JavaScript解决跨域的三种方法,需要的朋友可以参考下
    2024-03-03
  • 微信小程序webSocket的使用方法

    微信小程序webSocket的使用方法

    这篇文章主要介绍了微信小程序webSocket的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JS实现表单中点击小眼睛显示隐藏密码框中的密码

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    这篇文章主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下
    2020-04-04
  • 不同Jquery版本引发的问题解决

    不同Jquery版本引发的问题解决

    用JS实现了一个拖拽排序，可因Jquery版本不同导致浏览器访问时存在很多的问题，下面为大家介绍下具体的解决方法，感兴趣的朋友可以参考下
    2013-10-10
  • 详解微信小程序的 request 封装示例

    详解微信小程序的 request 封装示例

    这篇文章主要介绍了详解微信小程序的 request 封装示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript中this函数使用实例解析

    JavaScript中this函数使用实例解析

    这篇文章主要介绍了JavaScript中this函数使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Javascript的无new构建实例详解

    Javascript的无new构建实例详解

    这篇文章主要介绍了Javascript的无new构建实例详解的相关资料，小编感觉介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-05-05

最新评论