淡入背景/ div，标题/ div始终显示在顶部

Question

我有一些jQuery在.gridHover中淡出。但它掩盖了.title。

我尝试更改z-index，但是当悬停标题时悬停效果会停止。我尝试重复标题并将其淡化，但它只是效果不好而且看起来很草率。

我希望.title始终可见（可能会在.gridHover悬停时更改颜色）并且悬停效果始终会悬停在.gridHover的整个区域。< / p>

首先，这可能吗？其次，怎么样？ ：）

HTML

<div class="gridContainer" style="background-image: url('image.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;">

     <div class="title">Title</div>

     <a href="#">
         <span class="gridHover"></span>
     </a>

</div>

的jQuery

// Grid Hover - Overlay ----------------//
$('.gridHover').each(function(index) {

    $(this).hover(
      function () {
        $(this).fadeTo(100, .85);
      },
      function () {
        $(this).fadeTo(400, 0);
      }
    );

});

CSS

span.gridHover {
    width:100%;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 11;
    background:#fff;
    opacity:0;
    padding-top: 0px;
    cursor: pointer;
}

div.title {
    text-align: center;
    position:relative;
    top: 50%;
    font-family: 'RockwellStd', georgia, serif;
    color: #fff;
    z-index: 11;
}

Answer 1

您是否有理由不将悬停事件绑定到父“gridContainer”元素而不是“gridHover？”？