使用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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
Javascript倒计时代码
Aug 12 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
C语言中break与continue的区别
2012/07/12 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
教师师德考核自我评价
2014/09/13 职场文书
2014年终工作总结范本
2014/12/15 职场文书
音乐之声观后感
2015/06/04 职场文书
入党函调证明材料
2015/06/19 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers