jQuery - 悬停时向下动画文本

Question

这是演示我的问题的代码的一部分:-

<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]

基本上，如果您将鼠标悬停在框而不是文本上，它会正常工作，但当您将鼠标悬停在文本上时，它会弄乱动画。问题是悬停文本会触发 .group-overlay 的 mouseleave。如何防止这种情况发生？

Answer 1

将pointer-events: none;添加到.txt-sml

当您将鼠标悬停在文本 div 上时，mouseleave 会在 group-overlay 上触发，禁用指针事件可修复此问题，因为 .txt-sml 不再是鼠标事件的目标

Updated fiddle