将鼠标悬停在链接上，图像灰度过滤器

Question

我的图像上面有一个链接。当我将鼠标悬停在链接上时，图像必须为灰度。这是一个截图（图像为彩色）。所以当我将鼠标悬停在'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

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

Answer 2

看到你无法改变html，用纯css做这件事就是绝招（因为我不知道link1是如何构建的，关于image1）。也就是说，this是你想要的工作小提琴。

它使用跨浏览器的方式从here获取，它使用css类：

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

和

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

并像这样实现它：

{{1}}