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

Question

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

我想通过其网址或替代文字来识别图片，因为在这种情况下我无法添加课程。

我已尝试过此Stack Overflow链接中的说明，但没有运气：

CSS: Change image src on img:hover

将鼠标悬停在此图片的网址上时<：p>

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

我希望更改为此图片：

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

以下是我的网页的网址：

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

谢谢。

Answer 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")
}

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