마우스 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이 되게끔 설정을 하고 싶어서
위와 같은 코드를 구현했습니다만,
마우스를 올리면 display block이 됬다 none이 됬다 무한 반복되면서 위와 같이 반짝반짝거리기만 합니다.
무엇이 잘못되었고,
어딜 고쳐야하며,
이보다 더 나은 코드 구현 방법이 있을까요 ?
답변 1
$(function () {
$("#hd_allcate").hover(function(){
$(".hd_cateview").css("display","block");
},function(){
$(".hd_cateview").css("display","none");
});
});
제가 질문을 제대로 이해했다면 돌아갈겁니다...그리고 ul태그 안에 첫자식 div를 li로 고쳐주는것이 맞는것같습니다..
답변 감사드립니다 !
function을 2개로 분리하셨던 것일까요 ?
적어주신 코드 그대로 긁어갔음에도 불구하고 동일하네요 ㅜㅜ
다른 방법으로 해결했습니다. 감사합니다 !
