编程 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 相关文章推荐

浏览器加载、渲染和解析过程黑箱简析

Nov 29 Javascript

JQuery入门——用bind方法绑定事件处理函数应用介绍

Feb 05 Javascript

加载列表时jquery获取ul中第一个li的属性

Nov 02 Javascript

JavaScript的React框架中的JSX语法学习入门教程

Mar 05 Javascript

浅谈JavaScript 中有关时间对象的方法

Aug 15 Javascript

Javascript中函数名.length属性用法分析(对比arguments.length)

Sep 16 Javascript

BootStrap Table对前台页面表格的支持实例讲解

Dec 22 Javascript

AjaxUpLoad.js实现文件上传

Mar 05 Javascript

弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】

Aug 07 Javascript

微信小程序组件的外部样式externalClasses使用详解

Sep 06 Javascript

Vue的状态管理vuex使用方法详解

Feb 05 Javascript

如何在Vue中使localStorage具有响应式(思想实验)

Jul 14 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