使用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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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
1 Tube Radio
2021/03/02 无线电
PHP 第三节 变量介绍
2012/04/28 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php实现映射操作实例详解
2019/10/02 PHP
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
详解python中的json和字典dict
2018/06/22 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
详解Python学习之安装pandas
2019/04/16 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python实现直播推流效果
2019/11/26 Python
django rest framework serializers序列化实例
2020/05/13 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
小学课外阅读总结
2014/07/09 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
琅琊山导游词
2015/02/05 职场文书
运动会1000米加油稿
2015/07/21 职场文书
小学校本教研总结
2015/08/13 职场文书
《去年的树》教学反思
2016/02/18 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
以下牛机,你有几个
2022/04/05 无线电
python中redis包操作数据库的教程
2022/04/19 Python