zoukankan      html  css  js  c++  java
  • 基础

    mouseover 和 mouseenter

    mouseout 和 mouseleave

    mouseover / mouseout   鼠标进入/走出元素或其子元素时 均可触发

    mouseenter / mouseleave 鼠标进入/走出元素才会触发

    $().hover(function () {
    /*mouseenter*/
    }, function () {
    /*mouseleave*/
    });

    $().hover(function () {
    /*mouseenter和mouseleave*/
    });

    slideToggle jQuery帮帮我们封装好的切换
    <div id="box" class="box">
        <ul>
            <li>
                <a href="https://www.baidu.com">第一页</a>
                <ul>
                    <li><a href="https://www.baidu.com">第一页1</a></li>
                    <li><a href="https://www.baidu.com">第一页2</a></li>
                    <li><a href="https://www.baidu.com">第一页3</a></li>
                </ul>
            </li>
            <li>
                <a href="https://www.baidu.com">第二页</a>
                <ul>
                    <li><a href="https://www.baidu.com">第二页1</a></li>
                    <li><a href="https://www.baidu.com">第二页2</a></li>
                    <li><a href="https://www.baidu.com">第二页3</a></li>
                </ul>
            </li>
            <li>
                <a href="https://www.baidu.com">第三页</a>
                <ul>
                    <li><a href="https://www.baidu.com">第三页1</a></li>
                    <li><a href="https://www.baidu.com">第三页2</a></li>
                    <li><a href="https://www.baidu.com">第三页3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    

      

    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style-type: none;
    }
    
    .box {
         330px;
        height: 30px;
        padding-left: 10px;
        margin: 100px auto;
        background: #DDDDDD url(http://www.mengtu.cc/uploads/allimg/140906/7-140Z61I929.jpg) no-repeat center center scroll;
    }
    .box ul li {
        position: relative;
        float: left;
         100px;
        line-height: 30px;
        margin-right: 10px;
    }
    .box ul li a{
        display: block;
        text-align: center;
        text-decoration: none;
        background: #DDDDDD url(http://www.mengtu.cc/uploads/allimg/140906/7-140Z61I929.jpg) no-repeat center center scroll;
    }
    .box ul li ul{
        position: absolute;
        display: none;
    }
    

     

    $(function () {
        
        $("#box>ul>li").hover(function () {
            $(this).children("ul").slideToggle();
        });
    
    });
    

      

     

  • 相关阅读:
    大屏设计-大数据综合展示可视化平台
    大数据可视化大屏设计经验,教给你!
    数据可视化表格-设计经验分享!
    大数据可视化大屏图表设计经验,教给你
    数据可视化美学形式与功能需要齐头并进
    大屏可视化解决方案
    node-sass 安装失败 win32-x64-57_binding.node
    node版本如何升级
    ES6课程---8、模板字符串
    ES6课程---7、箭头函数
  • 原文地址:https://www.cnblogs.com/WeWeZhang/p/5796578.html
Copyright © 2011-2022 走看看