使用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版Tab标签切换
Mar 16 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
原生js简单实现放大镜特效
May 16 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
在Python中使用正则表达式的方法
2015/08/13 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python实现GIF图倒放
2020/07/16 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
市场营销专业求职信
2014/06/17 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
医院消毒隔离制度
2015/08/05 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
python中redis包操作数据库的教程
2022/04/19 Python