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

Question

I have an image with a link on top of it. When i hover over the link, the image must be in grayscale. Here's a screenshot (with the image in color). So when i hover over 'BEKIJK REALISATIES' the image (in the background) must be in grayscale.

I'm working in CMS concrete5, so editing the html is not an option (restrictions).

This is the code in javascript (that's not working).

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

Edit: here is the html and 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

Try this 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

Seeing as you can't alter the html, doing it with pure css is trick (since i dont know how link1 is structured with regards to image1). That said, this is a working fiddle of what you want.

It uses the cross browser way to do this taken from here , which uses the css classes:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

and

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

and implements it like so:

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