Jquery 灰度过滤器阻止图像覆盖显示

我在过滤器和jQuery方面遇到了问题

 $(document).ready(function(){
    $("img").mouseenter(function(){
    $("overlay").show("slide", { direction: "up" }, 600);
    $('img').addClass("gray");
    });
    $("overlay").mouseleave(function (){
    $("img").hide("slide", { direction: "up" }, 600);
    });
}); 

.gray {
  filter: grayscale(1);
  -moz-filter: grayscale(1);
  -webkit-filter: grayscale(1)
}

#g1 {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100%;
}



 <div id="g1">
    Some text to go on overlay<br/>
<a href="#">READ MORE</a>
    </div>
<img alt="" src="/portals/197/gfm/gb1.jpg" width="100%">

$（文档）.ready（函数（）{
$（“img”）.mouseenter（函数（）{
$（“叠加”）.show（“幻灯片”{方向：“向上”}，600）；
$（'img'）.addClass（“灰色”）；
});
$（“覆盖”）.mouseleave（函数（）{
$（“img”）.hide（“slide”{direction:“up”}，600）；
});
}); 
格雷先生{
过滤器：灰度（1）；
-moz滤波器：灰度（1）；
-webkit过滤器：灰度（1）
}
#g1{
显示：无；
位置：绝对位置；
背景：rgba（0,0,0,8）；
宽度：100%；
身高：100%；
}
要覆盖的一些文本

所以，在悬停时，我希望覆盖显示为文本/按钮，覆盖后面的图像为灰度。但灰度似乎阻止了覆盖层的显示

有什么办法可以让这一切顺利进行吗？

首先，尝试这样使用图像覆盖

HTML

<div class="img-wrapper">
    <img src="https://unsplash.it/200" >
</div>

首先，尝试这样使用图像覆盖

HTML

<div class="img-wrapper">
    <img src="https://unsplash.it/200" >
</div>

---

下面的代码在

mouseleave

和

mouseenter

时为图像添加

grayscale

效果

$(document).ready(function(){
    $("img").mouseenter(function(){
        $(this).addClass("gray");
    });
    $("img").mouseleave(function(){
        $(this).removeClass("gray");
    });
});

---

下面的代码在

mouseleave

和

mouseenter

时为图像添加

grayscale

效果

$(document).ready(function(){
    $("img").mouseenter(function(){
        $(this).addClass("gray");
    });
    $("img").mouseleave(function(){
        $(this).removeClass("gray");
    });
});

---

我知道我做错了什么，JQ只是写得不规范

    $(document).ready(function(){
        $(".g1").mouseenter(function(){
        $('.g1').addClass("gray");
        $("#g1").show("slide", { direction: "up" }, 600);
});
        $("#g1").mouseleave(function (){
        $('.g1').removeClass("gray");
        $("#g1").hide("slide", { direction: "up" }, 600);
        });
}); 

---

现在这个很好用了=）

我发现我做错了什么，JQ只是写得不规范

    $(document).ready(function(){
        $(".g1").mouseenter(function(){
        $('.g1').addClass("gray");
        $("#g1").show("slide", { direction: "up" }, 600);
});
        $("#g1").mouseleave(function (){
        $('.g1').removeClass("gray");
        $("#g1").hide("slide", { direction: "up" }, 600);
        });
}); 

---

这很好用=）

Heya，谢谢你的回答，我没有完全解释我自己，我想，我刚刚编辑了我的帖子，这样你就可以看到悬停覆盖图上的文本和按钮。因此，当您悬停图像灰度时，覆盖层会随着文本和按钮向下滑动。（希望我说的有道理）谢谢堆，这是一个很好的方式。呵呵，谢谢你的回答，我没有完全解释我自己，我想，我刚刚编辑了我的帖子，这样你就可以看到悬停上覆盖的文本和按钮。因此，当您悬停图像灰度时，覆盖层会随着文本和按钮向下滑动。（希望我说的有道理）谢谢堆，这是一个很好的方法。谢谢，我只是不能让它添加一个类以及覆盖层来同时用文本/按钮向下滑动。@MrWeb那么你的类灰度将不可见。它隐藏了overlay类的后面。你可以看到它，因为overlay是透明的。谢谢，我不能让它添加一个类，也不能让overlay同时用文本/按钮向下滑动。@MrWeb那么你的类灰度将不可见。它隐藏了overlay类的后面。由于overlay是透明的，所以您可以看到它