안녕하세요 선배님들 !

저는 지금

1이라는 div에 마우스를 올렸을때

2, 3 이라는 div가 display block이 되었다가

마우스를 빼면

2, 3이라는 div가 display none이 되는 코드를 구현하고싶은데

    <style>
        .hd_cateview { display: none; }
        .hd_cateview.current { display: block; }
    </style>

        <ul>
            <div id="hd_allcate"><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1"><i class="fas fa-bars" style="margin-right: 5px;"></i>전체 카테고리</a></div>
            <div id="hd_allcateshow" class="hd_cateview" style="width: 980px; height: 600px; position: absolute; top: 190px; z-index: 1000; background-color: #3f7f7f; data-tab="tab1"></div>
            <div id="hd_allblind" class="hd_cateview" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); data-tab="tab1"></div>
        </ul>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(function () {
        $('ul #hd_allcate').mouseenter(function () {
            $('.hd_cateview').addClass('current');
        })
        $('ul #hd_allcate').mouseleave(function () {
            $('.hd_cateview').removeClass('current');
        })
    });
</script>

위와같이 전체 카테고리라는 곳에 마우스를 올리면

display none이 되어있던 컨텐츠들이 display block이 되게끔 설정을 하고 싶어서

위와 같은 코드를 구현했습니다만,

마우스를 올리면 display block이 됬다 none이 됬다 무한 반복되면서 위와 같이 반짝반짝거리기만 합니다.

무엇이 잘못되었고, 

어딜 고쳐야하며, 

이보다 더 나은 코드 구현 방법이 있을까요 ?