jquery 질문
본문
$(document).on('mouseenter','.textcon,.rightwrap img,.rightwrap',function () {
if(".textcon".mouseenter&&$(this).index()==0){
$(this).parents(".texts").find(".rightwrap .right").css({"display" : "block"})
}
else if(".right,.rightwrap".mouseenter&&$(this).index()==0){
$(this).css({"display" : "block"})
}
})
이 코드에서 오류는 안나는데 실행이 안대서 질문 드립니다.
조건은 index가 0일떄만 이여야 하고 right라는 클래스에 display:block 을 걸어야 하는데 if문을 넣은 것은 .right와 .rightwrap은 display:none 상태라 mouseenter가 안되서 .textcon에 먼저 갖다대고 나타나면 right에 갖다 대서 계속 나타난 상태로 있게 할려고 하는데 어떻게 해야할까요
<div class="texts">
<div class="leftwrap">
<img class="left" src="left.png" alt="">
</div>
<div class="rightwrap">
<img class="right" src="right.png" alt="">
</div>
<div class="texthead"><p>글1</p></div>
<div class="textcon">
<div class="textcon11"></div>
<div class="textcon12"></div>
<div class="textcon13"></div>
<div class="textcon14"></div>
</div>
<div class="textfoot">
<img class="heart" src="heart.png" alt="">
<ul class="TFsubwrap">
<li class="TFsub"></li>
<li class="TFsub"></li>
<li class="TFsub"></li>
<li class="TFsub"></li>
</ul>
</div>
</div>
필요한 html은 이거예요
답변 1
잘이해했는지 모르겠지만
textcon11 을 mouseenter 하시고
rightwrap을 mouseenter 하셔야
rightwrap 이 block 되는 것으로 이해하고 작성했습니다.
<style>
.rightwrap{display:none;}
.texts.on .rightwrap{display:block;}
.texts.active .rightwrap{display:block;}
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
$(document).on("mouseenter", ".textcon div:eq(0)" , function(){
jQuery(".texts").addClass("on");
});
$(document).on("mouseleave", ".texts" , function(){
jQuery(".texts").removeClass("on");
});
$(document).on("mouseenter", ".texts .rightwrap", function(){
jQuery(".texts").addClass("active");
});
});
//-->
</script>
