在悬停时显示链接网格标题

Question

我正在尝试创建一个网格，在每个分区悬停时显示标题。 h4 需要从隐藏开始，最好使用fadeIn 和fadeOut 而不是show() 或hide()。我在淡入和淡出中遇到的一个问题是，如果您将鼠标悬停在其中几个上的速度足够快，它似乎会添加请求并开始闪烁。

以后会增加更多的部门。

HTML：

            <div class="grid-section col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <span>
            <a href="">
              <div class="card">
                <img src="images_grid/Grid_Set_01_10.jpg" style="max-width: 100%; max-height: 100%" >
                <div class="card-img-overlay">
                   <h4 class="card-title grid-pad-p text-center">Rwanda</h4>
                </div>
              </div>
            </a>
          </span>
        </div>
        <div class="grid-section col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <span>
            <a href="">
              <div class="card">
                <img src="images_grid/Grid_Set_01_11.jpg" style="max-width: 100%; max-height: 100%" >
                <div class="card-img-overlay">
                   <h4 class="card-title grid-pad-p text-center">Rwanda</h4>
                </div>
              </div>
            </a>
          </span>
        </div>
        <div class="grid-section col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <span>
            <a href="">
              <div class="card">
                <img src="images_grid/Grid_Set_01_12.jpg" style="max-width: 100%; max-height: 100%" >
                <div class="card-img-overlay">
                   <h4 class="card-title grid-pad-p text-center">Rwanda</h4>
                </div>
              </div>
            </a>
          </span>
        </div>

到目前为止的 JQuery：

$(".grid-section").hover(
  function(){
$(this).show();
  },function(){
$(this).hide();
  });

Answer 1

你可以用 css 做到这一点。访问者浏览器的工作量少一点。 CSS transitions at W3C

更新：使用 jQuery 有很多方法可以做到这一点！我添加了一个调用 css 的函数。您可以通过删除 css ':hover' 和 ':focus' 规则来测试它。希望这可以帮助您了解正在发生的事情。 更多信息：jQuery find() 和 jQuery toggle()，以及 CSS focus-within 以实现轻松的可访问性改进。

$( '.grid-section' ).hover( function() {
		$( this ).find( 'h4' ).toggleClass( 'hover' );
});

.grid-section {
    width: 150px;
    display: inline-block;
    background: slategray;
    text-align: center;
}
.grid-section h4 {
    color: transparent;
    transition: color .5s ease-in-out;
}
.grid-section h4.hover, .grid-section:hover h4, .grid-section:focus-within h4 {
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-section col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <span>
            <a href="">
              <div class="card">
                <img src="images_grid/Grid_Set_01_10.jpg" style="max-width: 100%; max-height: 100%" >
                <div class="card-img-overlay">
                   <h4 class="card-title grid-pad-p text-center">Rwanda</h4>
                </div>
              </div>
            </a>
          </span>
        </div>
        <div class="grid-section col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <span>
            <a href="">
              <div class="card">
                <img src="images_grid/Grid_Set_01_11.jpg" style="max-width: 100%; max-height: 100%" >
                <div class="card-img-overlay">
                   <h4 class="card-title grid-pad-p text-center">Rwanda</h4>
                </div>
              </div>
            </a>
          </span>
        </div>
        <div class="grid-section col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <span>
            <a href="">
              <div class="card">
                <img src="images_grid/Grid_Set_01_12.jpg" style="max-width: 100%; max-height: 100%" >
                <div class="card-img-overlay">
                   <h4 class="card-title grid-pad-p text-center">Rwanda</h4>
                </div>
              </div>
            </a>
          </span>
</div>