Jquery删除重叠项目上的悬停中断

Question

我有一个信息图形我正在制作互动。我创建了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>