CSS 将鼠标悬停在图像 link 上时显示翻转或发光图像，而不取决于图像大小？

Question

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

普通图像 link 看起来像这样：

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

当悬停在 link 上时，我可以让 glow.png 出现而不是 normal.png，即像鼠标悬停图像一样吗？

我为此找到了各种 CSS 解决方案，使用 sprite 或 :hover 背景图像，但它们都依赖于提前知道图像大小。这不适用于我的情况，因为我的图像是动态的。

我正在使用 HTML5。

Answer 1

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

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?

Answer 2

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

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>

CSS 将鼠标悬停在图像 link 上时显示翻转或发光图像，而不取决于图像大小？

CSS show rollover or glow image when hovering over an image link, without depending on image size?

css

image

hyperlink

hover

glow