js/jquery/CSS鼠标响应事件经过、移动、特效介绍
文章来源：365jz.com 点击数：325 更新时间：2017-08-10 11:54 参与评论
几种鼠标触发CSS事件。
说明：
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触
添加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" /> 使用mouse事件实现简单的鼠标经过特效
代码超级简单，这里就不多BB了，直接奉上
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul,li{margin:0; padding:0; list-style:none} ul li{width:100px; height:100px; border:1px solid #f00; float:left; margin:50px 10px; background-color:#ffffff;} ul li.current{border:1px solid #dfdfdf; background-color:#ff0000;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> </head> <body> <h1>鼠标经过下面的块</h1> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> <script type="text/javascript"> $("ul li").mouseover(function() { $(this).addClass("current"); }).mouseout(function() { $(this).removeClass("current"); }); </script>
非常简单的代码，小伙伴们参考下，自由扩展，希望大家能够喜欢。
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容
