在HTML / CSS中訪問鏈接時，使圖像變為灰度

Question

我希望訪問鏈接后具有超鏈接的圖像變為灰度。 HTML / CSS是否可能？

我首先嘗試使用img標簽，但是CSS似乎無法控制src或類似的東西。 我現在正在修改div類和background-image屬性，但似乎無法正確使用：visited，並且我不確定為什么。 實際上，我不知道我在做什么。 如果有人能提供一個很棒的代碼示例，那就太好了！

<a class="coolthing" style="background-image: url(https://i.imgur.com/eoem9Lk.jpg)" href="https://google.com/"></a>

.coolthing {
height: 100px
width: 200px
background-size: contain;
}
.coolthing:visited {
filter:grayscale(1)
}

我也嘗試過：

<div class="coolthing" style="background-image: url(https://i.imgur.com/eoem9Lk.jpg)"><a href="https://google.com/"></a></div>

.coolthing {
height: 100px
width: 200px
background-size: contain;
}
.coolthing:visited {
filter:grayscale(1)
}

Answer 1

由於安全性問題，瀏覽器限制了可以為a：visited鏈接設置的樣式。

允許的樣式為：

• 顏色
• 背景顏色
• 邊框顏色（以及單獨邊的邊框顏色）
• 輪廓色
• 列規則顏色
• 填充和描邊的顏色部分

來自https://www.w3schools.com/cssref/sel_visited.asp

Answer 2

嘗試像這樣的事情

 $('#link').click(function(){ $("#image").addClass("coolthing-visited"); }); 

 .coolthing { height: 100px; width: 200px; background-size: contain; } .coolthing-visited { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="link" class="coolthing" href="https://www.google.com" target="_blank"> <img id="image" src="https://www.w3schools.com/css/img_5terre.jpg"> </a>