将SVG悬停时更改颜色作为输入元素[重复]答案

【问题标题】：change color on hover of SVG as an input element [duplicate]将SVG悬停时更改颜色作为输入元素[重复]
【发布时间】：2017-03-15 21:05:54
【问题描述】：

我有一个 SVG 作为提交按钮。我希望 SVG 通过鼠标悬停将按钮变为蓝色。我下面的代码似乎不起作用。 HTML

<div class="icon-cnt" id="search-icon">
  <input type="image" src="assets/images/search-fill-2.svg" border="0" alt="Submit" id="submit svg-hover"/>
</div>

这是我的 CSS

#svg-hover:hover {
  fill: blue;
}

【问题讨论】：

id属性不能包含空格

标签： jquery html css svg

【解决方案1】：

如果你添加带有<input type="image"> 标签的svg，你不能用CSS 改变它的颜色。相反，您必须使用 <svg> 标签创建 svg 以使用 CSS 更改其颜色。

【讨论】：

【解决方案2】：

试试这个：

.svg-hover:hover {
  background: blue;
  }

<div class="icon-cnt" id="search-icon">
  <input type="image" src="http://s.cdpn.io/3/kiwi.svg" border="0" alt="Submit" id="submit" class="svg-hover"/>
</div>

【讨论】：

【解决方案3】：

您应该使用<svg> 而不是<img> 标签。对于more info。
一个元素只能有一个 ID。所以id="submit svg-hover"这个会产生问题。

【讨论】：

【解决方案4】：

你不能像类一样使用 ID，ID 是一个没有空格的字符集。您有两个解决方案使用类代替或更改 de ID。这是一个使用带有 ID 更改检查的“悬停”选择器的示例。

<HTML>
<Head>
<Style>
#svg-hover:hover {
  background-color: yellow;
}
</Style>
</Head>
<Body>
<div class="icon-cnt" id="search-icon">
  <input type="image" src="http://s.cdpn.io/3/kiwi.svg" border="0" alt="Submit" id="svg-hover"/>
</div>
</Body>
</HTML>

【讨论】：