Наведите указатель мыши на ссылку, изображение в оттенках серого фильтра

Question

У меня есть изображение со ссылкой на него. Когда я наводил курсор на ссылку, изображение должно быть в оттенках серого. Вот скриншот (с изображением в цвете). Поэтому, когда я нависаю над «BEKIJK REALISATIES», изображение (в фоновом режиме) должно быть в оттенках серого.

Я работаю в CMS concrete5, поэтому редактирование html не является вариантом (ограничениями).

Это код в JavaScript (который не работает).

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

Edit: здесь есть 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, делая его чистым КСС трюк (так как я не знаю, как link1 структурирован в отношении image1). Тем не менее, this - это рабочая скрипка того, что вы хотите.

Он использует перекрестный путь браузера, чтобы сделать это взято из here, который использует классы CSS:

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 */ 
} 

и

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