jQuery - Text Animieren nach unten auf schweben

Question

hier ein Teil des Codes ist, das zeigt, meine Ausgabe: -

<div class="col-md-4 relative nopadding"> 
    <div id="overlay-office" class="group-overlay"></div> 
    <div id="test-office" class="test-service"> 
    <div id="logo-test-office"></div> 
    <p class="txt-sml" style="top: 0px;">The widest choice of office supplies 
     <br>and equipment.</p> 
    </div> 
</div> 

jQuery

jQuery(document).ready(function($) { 

    /* Group Overlay */ 

    jQuery('.group-overlay').on({ 
     mouseenter: function() { 
     jQuery(this).next('.test-service').find('.txt-sml').animate({ 
      color: "#FFFFFF", 
      top: "+=40", 
      }, 300, function() { 
      // Animation complete. 
      });   
     }, 
     mouseleave: function() { 
      jQuery(this).next('.test-service').find('.txt-sml').animate({ 
      color: "#3F4444", 
      top: "-=40", 
      }, 300, function() { 
      // Animation complete. 
      });   
     }, 
    }); 

}); 

CSS

.group-overlay { 
     width: 370px; 
     height: 270px; 
     position: absolute;  
     top: 15px; 
     opacity: 0; 
     @include transition(all 0.3s ease-out); 
     z-index: 1; 
    } 
    .group-overlay:hover{opacity:0.9;} 

    #overlay-office {background: #0072ce;} 

.txt-sml { 
     @include font-size(18); 
     @include line-height(24); 
     margin: 10px 0; 
     font-family: 'Museo 100', sans-serif; 
     font-weight: 100; 
     position: relative; 
     z-index: 10; 
    } 

[SEE THE JSFIDDLE]

Grundsätzlich, wenn Sie Bewegen Sie den Mauszeiger über die Box und nicht über den Text. Wenn Sie den Mauszeiger über den Text halten, wird die Animation durcheinander gebracht. Das Problem dabei ist, dass der Mauszeiger über den Mauszeiger von .group-overlay ausgelöst wird. Wie kann ich das verhindern?

Answer 1

pointer-events: none; zu .txt-sml

hinzufügen Wenn Sie über den Text div schweben, wird mouseleave auf Gruppe-Overlay ausgelöst, Zeiger-Ereignisse zu deaktivieren behebt es, weil .txt-sml nicht mehr

ein Ziel von Mausereignissen ist

Updated fiddle