JQ鼠标移入移出JQ鼠标移入移出，体育科比单防詹姆斯欧文单打摇头库杜兰特背打朱芳雨，显示隐藏再显示，一个显示一个隐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d {
            display: block !important;
        }
    </style>
</head>

<body>
    <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>
</body>

</html>