使用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 loading效果代码
Jun 18 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
vue组件中的数据传递方法
May 14 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 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
php模拟js函数unescape的函数代码
2012/10/20 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python模块文件结构代码详解
2018/02/03 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
详解django中Template语言
2020/02/22 Python
python进行参数传递的方法
2020/05/12 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
什么是数据抽象
2016/11/26 面试题
电子商务专业求职信
2014/07/10 职场文书
经济贸易系求职信
2014/08/04 职场文书
供电工程专业求职信
2014/08/09 职场文书
国庆横幅标语
2014/10/08 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
python本地文件服务器实例教程
2021/05/02 Python
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript