在這篇文章中，我們將探討如何實現此效果並提供跨瀏覽器兼容性。
對於第一種方法，我們使用純CSS 和僅一個影像：
<code class="css">img.grayscale {
filter: url("data:image/svg+xml;utf8,..."); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}</code>此方法使用內聯SVG 來創建灰度效果和單獨的圖像顏色版本：
<code class="css">img.grayscale {
-webkit-filter: grayscale(100%);
}</code><code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377"> ... <image filter="url("#filtersPicture")" ... /> </svg></code>
最後，我們可以使用JavaScript 來更改懸停時的圖像來源：
<code class="css">img.grayscale {
filter: grayscale(100%);
}</code><code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');
grayscaleImages.forEach(image => {
image.addEventListener('mouseover', () => {
image.src = 'path/to/color_image.jpg';
});
image.addEventListener('mouseout', () => {
image.src = 'path/to/grayscale_image.jpg';
});
});</code>這些方法提供跨瀏覽器相容性，並允許您輕鬆為影像添加灰階和懸停效果。
以上是如何使用 CSS 創建在滑鼠懸停時重新著色的灰階圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
