Question

我正在尝试创建一个网格，在每个分区的悬停时显示标题。 h4需要从隐藏开始，最好使用fadeIn和fadeOut而不是show（）或hide（）。我用fadein和fadeout得到的一个问题是，如果你快速地将它们悬停在其中一些上面，它似乎会添加请求并开始闪烁。

稍后会增加更多分部。

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＆＃39;来悬停＆＃39;来测试它。和＆＃39;：焦点＆＃39;规则。希望这可以帮助您了解发生了什么。更多信息：jQuery find()＆amp; jQuery toggle()，还CSS focus-within用于无痛无障碍访问。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: