zoukankan      html  css  js  c++  java
  • jquery鼠标移入移出事件

    <!DOCTYPE html>
    <html>

    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        .left div,
        .right div {
            350px;
            height: 150px;
            padding: 5px;
            margin: 5px;
            border: 1px solid #ccc;
        }
       
        p {
            height: 50px;
            border:1px solid red;
            margin: 30px;
            text-align:center;
          font-size:30px;
          font-style:italic;
          font-weight:bold;
        }
          .p2{display:none}
        .left div {
            background: #bbffaa;
        }
       
        </style>
        <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    </head>

    <body>
        <h2>.hover()方法</h2>
        <div class="left">
            <div class="aaron1">
                <p class="p1">hello</p>
                <p class="p2">2</p>
            </div>
        </div>
        <script type="text/javascript">
        $(".p1").hover(
            function() {
                $(this).css("background", 'red');
                $(this).animate({opacity:0},3000)
            
            },
            function() {
                $(this).css("background", 'yellow');
                 $(this).animate({opacity:1},3000)
            }
        );
         $(".aaron1").hover(
            function() {
                $(this).css("background", '#00ffff');
            },
            function() {
                $(this).css("background", '#ccffcc');
            }
        );
         $("p").mouseout(function(){$(".aaron1").css("background","#ffccff")})
          $("p").mouseover(function(){$(".aaron1").css("background","#33ccff")})

        </script>
    </body>

    </html>

    红尘往事,一切随风!
  • 相关阅读:
    HttpServletResponse对象
    FastJSON 简介及其Map/JSON/String 互转(转载)
    commons-lang3-3.4类库
    HttpClient相关
    JSON.parse()方法 (转载)
    textview用法--推荐
    每日总结
    百度网盘
    每日总结
    每日总结
  • 原文地址:https://www.cnblogs.com/xwenwu/p/13629990.html
Copyright © 2011-2022 走看看