Question

我有一个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;
}

Answer 1

如果添加带有<input type="image">标记的svg，则无法使用CSS更改其颜色。相反，您必须使用<svg>标记创建svg以使用CSS更改其颜色。

Answer 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>

Answer 3

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

Answer 4

您不能像使用类一样使用ID，ID是一个没有空格的字符集。您有两个解决方案使用类或更改de ID。这是一个使用示例＆＃34; hover＆＃34; 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>

将SVG悬停时的颜色更改为输入元素

4 个答案: