灰度过滤器阻止图像叠加显示答案

【问题标题】：Grayscale filter stops image overlay from displaying灰度过滤器阻止图像叠加显示
【发布时间】：2016-11-02 00:18:20
【问题描述】：

我在使用过滤器和 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%">

因此，在悬停时，我希望叠加层与文本/按钮一起显示，并且叠加层后面的图像是灰度的。但是灰度似乎阻止了叠加层的显示。

关于如何完成这项工作的任何想法？

【问题讨论】：

标签： jquery css filter overlay grayscale

【解决方案1】：

Check this updated fiddle

首先尝试像这样使用图像叠加，

HTML

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

CSS

.img-wrapper {
    position:relative;
    display:inline-block
}   

.img-wrapper:after {
    content:'';
    position:absolute;
    left:0; 
    top:0;
    width:100%; 
    height:100%;
    display:inline-block;
    background:rgba(0,0,0,0.5) 
}

【讨论】：

嘿，谢谢你的回答，我猜我并没有完全解释自己，我刚刚编辑了我的帖子，这样你就可以看到悬停时覆盖上的文本和按钮。因此，当您将图像灰度悬停时，覆盖层会随着文本和按钮向下滑动。（希望我说得通）
谢谢大家，这是一个绝妙的方法。

【解决方案2】：

以下代码在mouseleave 和mouseenter 时为您的图像添加grayscale 效果。

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

【讨论】：

谢谢，我只是不能让它添加一个类以及覆盖层以同时使用文本/按钮向下滑动。
@MrWeb 那么你的班级灰度将不可见。它隐藏在覆盖类的后面。
因为覆盖层是透明的所以可以看到

【解决方案3】：

我发现我做错了什么，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);
        });
});

现在可以正常使用 =)

【讨论】：