使用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全部源代码
May 04 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
vue组件生命周期详解
Nov 07 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
django的ORM模型的实现原理
2019/03/04 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python实现吃苹果小游戏
2020/03/21 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
无偿献血倡议书
2014/04/14 职场文书
环境日宣传活动总结
2014/07/09 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
学雷锋倡议书
2015/01/19 职场文书
民主评议党员个人总结
2015/02/13 职场文书
企业计划生育责任书
2015/05/09 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL