我有一个信息图形我正在制作互动。我创建了div,它们重叠图像以使它们可以点击,我创建的文本框包含当用户将鼠标悬停在图像上时显示的信息。
问题在于,当我将鼠标悬停在图像上时,文本框会中断悬停事件,因为它认为我不再悬停在图像上。
如何使悬停将忽略文本框重叠?
Example on codepen
JQUERY
$(document).ready(function() {
$('.step1').hover(function() {
$('.step1_info').toggleClass('move1');
});
$('.step2').hover(function() {
$('.step2_info').toggleClass('move1')
});
$('.step3').hover(function() {
$('.step3_info').toggleClass('move2')
});
$('.step4').hover(function() {
$('.step4_info').toggleClass('move2')
});
$('.close').hover(function() {
$(this).parent('div').removeClass('move2').removeClass('move1')
});
});
HTML
<img src="http://smartcoder.co/wp-content/themes/smartcoder_theme/content/infographic.png" alt="dfgdfg" />
<div class="clickable step1"><div class="c_area"></div></div>
<div class="clickable step2"><div class="c_area"></div></div>
<div class="clickable step3"><div class="c_area"></div></div>
<div class="clickable step4"><div class="c_area"></div></div>
<div class="step1_info step_right">You will login to our secure web portal and give us compete access to all your files so we can perform the coding services<p class="close">close</p></div>
<div class="step2_info step_right">Once we have access to your system, you will be on your way to better codes and our cetified nurses will write the recommendations<p class="close">close</p></div>
<div class="step3_info step_left">Once the coding has been completed, you can download them again from our secure web portal<p class="close">close</p></div>
<div class="step4_info step_left">We will review the codes together with you and make sure everything is in order.<p class="close">close</p></div>
</div>
</div>