使用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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
javaScript语法总结
2016/11/25 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python 实现进度条的六种方式
2021/01/06 Python
Python如何telnet到网络设备
2021/02/18 Python
环境科学专业个人求职信
2013/09/26 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
公司总经理岗位职责
2014/03/15 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
windows server2008 开启端口的实现方法
2022/06/25 Servers