将鼠标悬停在link，图片灰度滤镜

Question

我有一张图片，上面有一个 link。当我将鼠标悬停在 link 上时，图像必须为灰度。这是屏幕截图（彩色图像）。所以当我将鼠标悬停在 'BEKIJK REALISATIES' 上时，图像（在背景中）必须是灰度的。

我在 CMS concrete5 工作，所以编辑 html 不是一个选项（限制）。

这是 javascript 中的代码（不起作用）。

$(document).ready(function() {
  $(".link1").mouseenter(function() {
    $(".image1").css.style.filter = "grayscale(1)";
  });
});

编辑：这里是 html 和 css

.link1 a{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 15px !important;
    background-color: #3c3c3b;
    color: black !important;
}

.link1 {
    margin-top: -120px;
    position: relative;
    margin-bottom: 82px;
}

.image1:hover{
-ms-filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(1);

}

<div class="col-sm-3">

  <div class="image1">
    <a href="http://grafomantestsite2.be/index.php/realisaties">
      <img src="http://grafomantestsite2.be/application/files/6314/4161/6181/realisatie1.png" alt="realisatie1.png" width="401" height="269" class="ccm-image-block img-responsive bID-83">
    </a>
  </div>
  <div class="link1">
    <p><a href="http://grafomantestsite2.be/index.php/realisaties">BEKIJK REALISATIES</a>
    </p>
  </div>
</div>

Answer 1

鉴于您无法更改 html，因此使用纯 css 来完成它是一个技巧（因为我不知道 link1 是如何根据 image1 构建的）。也就是说，this 是您想要的工作 fiddle。

它使用跨浏览器的方式来执行此操作，取自 here，它使用 css 类：

img.grayscale {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

和

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
    -webkit-filter: grayscale(0%);
}

并像这样实现它：

$(document).ready(function() {
  $(".link1")
  .mouseenter(function() {
    $(".image1").addClass('grayscale').removeClass('disabled');
  })
  .mouseleave(function() {
    $(".image1").addClass('disabled');
  });
});

Answer 2

试试这个 JSFiddle http://jsfiddle.net/ujw9opob/

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

CSS

.addingGrayScale {
     -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
}

将鼠标悬停在link，图片灰度滤镜

Hover over link, image grayscale filter

html

javascript

css

jquery

grayscale