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

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

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

试试这个：

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

您应该使用<svg>而不是<img>标记。欲了解更多信息。
一个元素只能有一个 ID。所以id="submit svg-hover"这个会产生问题。

你不能像类一样使用 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>

相关内容

最新更新

热门标签：