使用mouse事件实现简单的鼠标经过特效


Posted in Javascript onJanuary 30, 2015

代码超级简单,这里就不多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>

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

Javascript 相关文章推荐
jQuery创建插件的代码分析
Apr 14 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
js实现屏幕自适应局部代码分享
Jan 30 #Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 #Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 #Javascript
javascript中sort()的用法实例分析
Jan 30 #Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 #Javascript
javascript结合fileReader 实现上传图片
Jan 30 #Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 #Javascript
You might like
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
一看就懂得Python的math模块
2018/10/21 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python语言元素知识点详解
2019/05/15 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
杭州时比特电子有限公司SQL
2013/08/22 面试题
介绍一下Linux中的链接
2016/05/28 面试题
会计职业生涯规划书
2014/01/13 职场文书
男性健康日的活动方案
2014/08/18 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
申请吧主发表的感言
2015/08/03 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
React实现动效弹窗组件
2021/06/21 Javascript
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
php实现自动生成验证码的实例讲解
2021/11/17 PHP