使用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 jsonp 使用示例代码
Aug 12 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
浅谈php自定义错误日志
2015/02/13 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
javascript实现切换td中的值
2014/12/05 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
react基本安装与测试示例
2020/04/27 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
自我鉴定书范文
2013/10/02 职场文书
超市理货员岗位职责
2014/07/04 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
火烧圆明园观后感
2015/06/03 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers