使用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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
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中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
php解决安全问题的方法实例
2019/09/19 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Python 递归函数详解及实例
2016/12/27 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python使用epoll实现服务端的方法
2018/10/16 Python
详解python读取和输出到txt
2019/03/29 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
jupyter notebook 重装教程
2020/04/16 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
文员自我评价怎么写
2013/09/19 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
节能环保口号
2014/06/12 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫