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%">

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

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

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

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

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

Answer 3

我弄清楚我做错了什么，JQ刚刚写完了。

Matcher Selection
       -E, --extended-regexp
              Interpret PATTERN as an extended regular expression (ERE, see below).  (-E is specified by POSIX.)

       -F, --fixed-strings
              Interpret PATTERN as a list of fixed strings, separated by newlines, any of which is to be matched.  (-F is specified by POSIX.)

       -G, --basic-regexp
              Interpret PATTERN as a basic regular expression (BRE, see below).  This is the default.

       -P, --perl-regexp
              Interpret PATTERN as a Perl regular expression (PCRE, see below).  This is highly experimental and `grep -P` may warn of unimplemented features.

现在工作正常=）

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

3 个答案: