如何消除悬停闪烁？

Question

我同时使用了悬停和mouseenter，mouseout，但两者都是一样的。

我该如何停止闪烁。

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(); 

     }); 

JSFIDDLE

Answer 1

$('.pro_img_border').mouseenter(function(){ 
      $("#img_1-komal").show(); 


     }); 
     $('.pro_img_border').mouseleave(function() { 
       $('#img_1-komal').hide(); 

    });