编程 Javascript

使用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>

非常简单的代码，小伙伴们参考下，自由扩展，希望大家能够喜欢。

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

XML+XSL 与 HTML 两种方案的结合

Apr 22 Javascript

初学js 新节点的创建删除的步骤

Jul 04 Javascript

jquery动态增加删除表格行的小例子

Nov 14 Javascript

js添加千分位的实现代码(超简单)

Aug 01 Javascript

js原生实现FastClick事件的实例

Nov 20 Javascript

jquery删除数组中重复元素

Dec 05 Javascript

JS实现太极旋转思路分析

Dec 09 Javascript

JavaScript中捕获与冒泡详解及实例

Feb 03 Javascript

原生JS实现隐藏显示图片 JS实现点击切换图片效果

Jan 27 Javascript

React之PureComponent的使用作用

Jul 10 Javascript

详解关于Vue2.0路由开启keep-alive时需要注意的地方

Sep 18 Javascript

Javascript中绑定click事件的四种方式介绍

Oct 26 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

全国FM电台频率大全 - 14 江西省

2020/03/11 无线电

PHP 实例化类的一点摘记

2008/03/23 PHP

php获取mysql版本的几种方法小结

2008/03/25 PHP

PHP中ob_start函数的使用说明

2013/11/11 PHP

php表单提交实例讲解

2015/11/12 PHP

php usort 使用用户自定义的比较函数对二维数组中的值进行排序

2017/05/02 PHP

为JavaScript添加重载函数的辅助方法

2010/07/04 Javascript

JavaScript 一道字符串分解的题目

2011/08/03 Javascript

js 如何实现对数据库的增删改查

2012/11/23 Javascript

js局部刷新页面时间具体实现

2013/07/04 Javascript

Script标签与访问HTML页面详解

2014/01/10 Javascript

jquery实现简单的轮换出现效果实例

2015/07/23 Javascript

jQuery仿360导航页图标拖动排序效果代码分享

2015/08/24 Javascript

基于OL2实现百度地图ABCD marker的效果

2015/10/01 Javascript

JavaScript制作简单的日历效果

2016/03/10 Javascript

JQuery手速测试小游戏实现思路详解

2016/09/20 Javascript

Vue.js组件tree实现省市多级联动

2016/12/02 Javascript

Bootstrap源码解读标签、徽章、缩略图和警示框（8）

2016/12/26 Javascript

jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】

2017/03/09 Javascript

JS 插件dropload下拉刷新、上拉加载使用小结

2017/04/13 Javascript

Angular 2.x学习教程之结构指令详解

2017/05/25 Javascript

详解vue.js+UEditor集成 [前后端分离项目]

2017/07/07 Javascript

[01:00:06]加油DOTA_EP01_网络版

2014/08/09 DOTA

[01:22:28]DOTA2-DPC中国联赛正赛 SAG vs RNG BO3 第一场 1月18日

2021/03/11 DOTA

python实现根据ip地址反向查找主机名称的方法

2015/04/29 Python

python开发之thread实现布朗运动的方法

2015/11/11 Python

python编程开发之textwrap文本样式处理技巧

2015/11/13 Python

python如何压缩新文件到已有ZIP文件

2018/03/14 Python

Python中一般处理中文的几种方法

2019/03/06 Python

django 类视图的使用方法详解

2019/07/24 Python

基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算

2020/08/05 Python

物理力学求职信

2014/02/18 职场文书

捐助倡议书范文

2014/04/15 职场文书

幼儿园教师师德师风演讲稿：爱我所爱无悔青春

2014/09/10 职场文书

工作疏忽检讨书500字

2014/10/26 职场文书

python基础学习之递归函数知识总结

2021/05/26 Python