JQuery鼠标移入移出

CSS部分

<style>
    .d {
        display: block !important;
    }
</style>

HTML部分

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

JS部分

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