Jquery 淡入背景/div，顶部始终可见标题/div

我有一些jQuery在

.gridHover

中淡出。但它掩盖了

.title

我尝试更改z索引，但当悬停标题时，悬停效果停止。我试着复制标题，并将其淡入淡出，但效果不好，看起来很邋遢

我希望保持

.title

始终可见（可能会在

.gridHover

的悬停位置更改颜色），悬停效果始终可以悬停在

.gridHover

的整个区域上

首先，这可能吗？第二，如何

HTML CSS

---

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

这两个元素上都有z-index:11，因此无法按预期工作。将.title的z索引更改为更高的值，它可能会起作用。谢谢您的建议。不幸的是，正如我在OP中提到的，当我提高z索引时，标题会阻止一些悬停区域，因此这不是一个真正可行的解决方案。再次感谢。如果我没有弄错的话，悬停事件会改变它绑定到的元素的不透明度，对吗？因此，我希望

.gridContainer

始终显示（它是主图像），然后在悬停时淡入一个覆盖。所以悬停事件需要作用于一个单独的元素，如果我没有弄错的话，也是这样。但是，您仍然可以选择它的子对象，并相对于“父对象”选择器运行动画。而不是使用

$（this）.fadeTo（100.85）

应该使用

$（this.find（'.gridHover'）.fadeTo（100.85）
<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>

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

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

});

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