0
나는 마우스 오버와 마우스 센터를 모두 사용했지만 둘 다 똑같이 작동합니다.호버의 깜박임을 제거하는 방법은 무엇입니까?
어떻게 깜박임을 멈출 수 있습니까?
HTML
<div class="pro_img_border">
<div class="pro_img" id="pro_img_1">
</div>
<div class="pro_img-txt" id="img_1-komal">
hover text...
</div>
</div>
<div class="pro_img_border_1">
<div class="pro_img" id="pro_img_2">
</div>
<div class="pro_img-txt" id="img_2-komal">
hover text...
</div>
</div>`
CSS
.pro_img_border{
border: 1px dotted #000;
border-radius: 150px;
width: 221px;
height: 221px;
padding: 10px;
margin: 0px auto;
}
.pro_img{
z-index:0;
border-radius: 150px;
background-color: #cccccc;
width: 221px;
height: 221px;
margin: 0 auto;
position: absolute;
cursor: pointer;
}
.pro_img-txt{
border-radius: 150px;
background-color: rgba(202, 140, 140, 0.52);
width: 221px;
height: 221px;
margin: 0 auto;
position: absolute;
line-height: 19;
font-size: 20px;
color: rgba(1, 0, 0, 1);
display: none;
z-index:10;
}
JQuery와
$('.pro_img_border #pro_img_1').mouseenter(function(){
$("#img_1-komal").show();
});
$('.pro_img_border #pro_img_1').mouseleave(function() {
$('#img_1-komal').hide();
});
$('.pro_img_border_1 #pro_img_2').hover(function(){
$("#img_2-komal").show();
}, function() {
$('#img_2-komal').hide();
});
왜 부모 요소가 사용 되었습니까? 자식 요소가있는 다른 솔루션이 있습니까? –
두 번째 div를 표시하는 동안 이전 div가 새 div 아래에 있고 이동이 이제 새/초 div를 가리키기 때문에 마우스를 올리거나 움직이는 이벤트가 자동으로 실행되기 때문에 마우스 이벤트가 발생할 수 있습니다. 곧 커서가 새 div를 가리키게됩니다. – dharmesh