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的鼠标距离。我怎样才能防止这种情况发生？

Answer 1

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

当您将鼠标悬停在文本div上时，会在组覆盖上触发mouseleave，禁用指针事件会修复它，因为.txt-sml不再是鼠标事件的目标

Updated fiddle

jQuery - 在悬停时向下显示动画文本

1 个答案: