使用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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
javascript动画浅析
2012/08/30 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python实现学生管理系统开发
2020/07/24 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
理货员的岗位职责
2013/11/23 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年销售部工作总结
2014/12/01 职场文书