使用 URL 作为 ID 在悬停时更改图像 src答案

【问题标题】：Change image src on hover using URL as ID使用 URL 作为 ID 在悬停时更改图像 src
【发布时间】：2016-12-05 23:17:23
【问题描述】：

我正在尝试在悬停时更改图像 src。

我想通过 URL 或替代文本来标识图像，因为在这种情况下我无法添加类。

我尝试了这个 Stack Overflow 链接中的说明，但没有成功：

CSS: Change image src on img:hover

当鼠标悬停在该图片的 URL 上时：

https://static1.squarespace.com/static/5463b725e4b06d233c3a876a/t/56a921809cadb641f7ce1a09/1453912583654/Screen+Shot+2016-01-27+at+8.34.20+AM.png?format=750w

我想把它改成这个图片：

（我有这张图片的链接，但我的帖子中不能使用两个以上的链接）

这是我页面的 URL：

https://toby-thiermann.squarespace.com/new-index/

谢谢。

【问题讨论】：

标签： jquery css image hover

【解决方案1】：

通常最好的方法是不使用标签，而是使用 CSS。然后使用背景图像方法并将其添加到您的 div 将允许您换出图像。

试试这样的：

<div class="your-class-here"></div>

然后像这样的css：

.your-class-here{
  width: 200px;
  height: 200px;
  background-image: url("your-non-hover-image")
  transition: all ease 250ms
}
.your-class-here:hover{
  background-image: url("your-hover-image")
}

我添加了一个过渡，这只是让它更平滑一点。

【讨论】：