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

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

文章来源：365jz.com     点击数：307    更新时间：2017-08-10 11:54   参与评论
几种鼠标触发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>

 

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

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

您可能感兴趣的文章:

发表评论 (307人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------