灰度滤镜阻止图像叠加显示

Question

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

所以在悬停时，我希望叠加层显示 text/button 并且叠加层后面的图像是灰度的。但是灰度似乎阻止了叠加层的显示。

关于如何使这项工作有任何想法吗？

Answer 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) 
}

Answer 2

下面的代码在 mouseleave 和 mouseenter 时对图像添加 grayscale 效果。

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

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

这现在工作正常 =)

灰度滤镜阻止图像叠加显示

Grayscale filter stops image overlay from displaying

jquery

css

filter

overlay

grayscale