마우스 hover 질문 드립니다. (코드 있어요 ㅜㅜ)

마우스 hover 질문 드립니다. (코드 있어요 ㅜㅜ)

QA

마우스 hover 질문 드립니다. (코드 있어요 ㅜㅜ)

본문

안녕하세요 선배님들 !

 

저는 지금

 

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이 되게끔 설정을 하고 싶어서

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

 

1935541659_1547431953.7991.gif

 

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

 

 

 

무엇이 잘못되었고, 

어딜 고쳐야하며, 

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

이 질문에 댓글 쓰기 :

답변 1

$(function () {
        $("#hd_allcate").hover(function(){

            $(".hd_cateview").css("display","block");

        },function(){

            $(".hd_cateview").css("display","none");

        });
    });

 

제가 질문을 제대로 이해했다면 돌아갈겁니다...그리고 ul태그 안에 첫자식 div를 li로 고쳐주는것이 맞는것같습니다..

답변을 작성하시기 전에 로그인 해주세요.
전체 38
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT