使用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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 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文件上传类的分享
2017/07/06 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python协程之动态添加任务的方法
2019/02/19 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Python实现京东抢秒杀功能
2021/01/25 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
类如何去实现接口
2013/12/19 面试题
opencv实现图像平移效果
2021/03/24 Python
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
慰问信模板
2015/02/14 职场文书
教师网络培训心得体会
2016/01/09 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
Python实现自动玩连连看的脚本分享
2022/04/04 Python