在 CSS 中悬停时更改 img src SVG [重复]答案

【问题标题】：Change img src SVG on hover in CSS [duplicate]在 CSS 中悬停时更改 img src SVG [重复]
【发布时间】：2020-12-20 12:31:46
【问题描述】：

html:

<img src="logo.svg" alt="Logo" class="logo-img">

css:

.logo-img path:hover {fill: red;}

有没有办法在悬停时更改 img svg 上的十六进制代码？

【问题讨论】：

标签： html css

【解决方案1】：

src 属性中的 svg 作为文件加载，因此不可编辑。

如果您打算修改 fill、stroke 等，您应该在<svg> 标签中使用logo.svg，而不是<img />。

【讨论】：

【解决方案2】：

我认为你不能只使用 CSS 来做到这一点，但如果你可以更改 HTML，你可以使用一点 JavaScript 来做到这一点。

类似：

onmouseover="this.src='newSrcHover.jpg';"

或者您可以更改:hover 上的background-image: url('linkToNewImage')property...虽然这确实会更改悬停时的图像并且可能对某些人来说已经足够了，但它不是src。 JS 那个是。

【讨论】：