使用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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 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自定义函数截取汉字长度
2014/05/15 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python getpass模块用法及实例详解
2019/10/07 Python
解决Python3下map函数的显示问题
2019/12/04 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
求网格中的黑点分布
2013/11/06 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
运动会广播稿200字
2014/01/15 职场文书
物理课外活动总结
2014/08/27 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2014年超市工作总结
2014/11/19 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
写给老师的感谢信
2015/01/20 职场文书
秋菊打官司观后感
2015/06/03 职场文书
暖春观后感
2015/06/08 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers