Question

我有两张图片normal.png和glow.png，两张图片的尺寸相同但我不知道这个尺码。

正常的图片链接如下所示：

<a href='http://example.com'>
  <img src='normal.png'>
</a>

将鼠标悬停在链接上时，是否可以显示glow.png代替normal.png，例如翻转图像？

我发现了各种各样的CSS解决方案，使用精灵或悬停背景图像，但它们都取决于提前知道图像大小。这并不适用于我的情况，因为我的图像是动态的。

我正在使用HTML5。

Answer 1

伪元素叠加似乎是理想的解决方案：

body {
  text-align: center;
}
a {
  margin: 1em;
  display: inline-block;
  position: relative;
}
a:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://www.fillmurray.com/140/100);
}
img {
  display: block;
}

<a href='http://example.com'>
  <img src='http://www.fillmurray.com/g/140/100'>
</a>

Answer 2

正如本文所说，你可以这样做：

a:hover img {
  content:url("http://lorempicsum.com/futurama/255/200/2");
}

See working fiddle

但它并不是每个浏览器都完全兼容。

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

CSS在鼠标悬停在图像链接上时显示翻转或发光图像，而不依赖于图像大小？

2 个答案: