您现在的位置: 365建站网 > 365文章 > js/jquery/CSS鼠标响应事件经过、移动、特效介绍

js/jquery/CSS鼠标响应事件经过、移动、特效介绍

文章来源:365jz.com     点击数:404    更新时间:2017-08-10 11:54   参与评论
几种鼠标触发CSS事件。
说明:
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

</>code

  1. <html>
  2. <head>
  3. <title>CSS 鼠标响应事件</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <style type="text/css">
  6. .Off{ background-color: #00FF66; padding:100px;}
  7. .up{background-color: #FF0000; padding:100px}
  8. </style>
  9. </head>
  10. <body>
  11. <ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className='Up'">
  12. <h4>鼠标响应事件 当鼠标经过移出时切换css</h4>
  13. <li>onMouseDown 按下鼠标时触发
  14. <li>onMouseOver 鼠标经过时触发
  15. <li>onMouseUp 按下鼠标松开鼠标时触发
  16. <li>onMouseOut 鼠标移出时触发
  17. <li>onMouseMove 鼠标移动时触发 </li>
  18. </ul>
  19. </body>
  20. </html>

</>code

  1. <span style="color: red;">鼠标经过表格变色样式:<br></span>

</>code

  1. <style>
  2. table { background-color:#000000; cursor:hand; width:100%; }
  3. td {
  4. /*设置onmouseover事件*/
  5. onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
  6. /*设置onmouseout事件*/
  7. onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
  8. background-color:#ffffff;
  9. }
  10. </style>
  11. 控制表格隔行变色:
  12. 简单应用:
  13. <style type="text/css">
  14. <!--
  15. tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
  16. -->
  17. 高级应用:每个单元格变色
  18. <style type="text/css">
  19. <!--
  20. tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
  21. td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
  22. -->
  23. </style>

添加CSS文件引用:

</>code

  1. <link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />
  2. 使用mouse事件实现简单的鼠标经过特效

代码超级简单,这里就不多BB了,直接奉上

</>code

  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     body,ul,li{margin:0; padding:0; list-style:none}
  8.     ul li{width:100px; height:100px; border:1px solid #f00; float:left; margin:50px 10px; background-color:#ffffff;}
  9.     ul li.current{border:1px solid #dfdfdf; background-color:#ff0000;}
  10. </style>
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  12. </head>
  13. <body>
  14.     <h1>鼠标经过下面的块</h1>
  15.     <ul>
  16.         <li></li>
  17.         <li></li>
  18.         <li></li>
  19.         <li></li>
  20.     </ul>
  21. </body>
  22. </html>
  23. <script type="text/javascript">
  24.     $("ul li").mouseover(function()
  25.     {
  26.          $(this).addClass("current");
  27.     }).mouseout(function()   
  28.     {
  29.         $(this).removeClass("current");       
  30.     });
  31. </script>

 

非常简单的代码,小伙伴们参考下,自由扩展,希望大家能够喜欢。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (404人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号