css - CSS 中的 SVG onmouseover

Question

我有一个使用 CSS 创建一个不断变化的 onmouseover 按钮的问题。很长一段时间以来，我使用以下代码调用

<a href="../../../">
<img src="file-url" 
onmouseover="this.src='file-url'"
onmouseout="this.src='file-url'"
border="0" alt=""/></a>
</div>

是否可以使用 svg 字符串来代替 url？

提前感谢您抽出宝贵时间!!

米奇

Answer 1

使用您的 .svg 作为背景图片。

<a class="link" href="../../../"></a>

a.link {
    display: block;
    width: width of your svg;
    height: height of your svg;
    background: url(path/to/your/svg);
}

a.link:hover {
    background: url(path/to/your/hover/svg);
}