广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    使用mouse事件实现简单的鼠标经过特效

    2018-04-07 07:50:21 次阅读 稿源:互联网
    零七广告

    代码超级简单,这里就不多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>

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

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告