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

Posted 2023-03-06

【中文标题】在 CSS 中悬停时更改 img src SVG [重复]

【英文标题】：Change img src SVG on hover in CSS [duplicate]

【发布时间】：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 上的十六进制代码？

【问题讨论】：

我之前遇到过同样的问题。我所做的是将图像用作具有宽度和高度的分区的背景，然后在悬停时更改 background-image 属性。但我无法更改来源。

@Martin 我尝试在 SVG 文件中更改它，但没有运气。除此之外，我只尝试将填充更改为红色，如您所见。我在互联网上找不到任何其他解决方案。

【参考方案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 那个是。