jqurey:鼠标移入移出

116 阅读1分钟

<ul style="background-color: cadetblue;">
        <li class="a" style="padding: 30px;background-color: burlywood;width: 80px;position: relative;">
            体育
            <ul class="b" style="display: none;background-color:red;width: 200px;position: absolute;left:0;top:50px">
                <li>科比单防詹姆斯</li>
                <li>欧文单打摇头库</li>
                <li>杜兰特背打朱芳雨</li>
            </ul>
        </li>
    </ul>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* 显示隐藏再显示的过程 */
        // $('.a').mouseover(function(){
        //     console.log('mouseover')
        //     $('.b').show();
        // })
        // $('.a').mouseout(function(){
        //     console.log('mouseout')
        //     $('.b').hide();
        // })
        /* 只执行一个显示 一个隐藏 */
        // $('.a').mouseenter(function(){
        //     console.log('mouseenter')
        //     $('.b').toggleClass('d');
        // })
        // $('.a').mouseleave(function(){
        //     console.log('mouseleave')
        //      $('.b').toggleClass('d');
        // })
        $('.a').hover(function(){
            $('.b').toggleClass('d');
        })
    </script>