javascript - 将鼠标悬停在链接上，图像灰度滤镜

Question

我有一张图像，上面有一个链接。当我将鼠标悬停在链接上时，图像必须是灰度的。这是一个屏幕截图(图像为彩色)。因此，当我将鼠标悬停在“BEKIJK REALISATIES”上时，图像(背景)必须为灰度。

我在 CMScrete5 中工作，因此编辑 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

试试这个 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 */
}