css - 无图像变化的翻转

Question

我有一个小的缩略图图像，当鼠标滑过它时我希望更改它。我想知道是否有办法做到这一点，而无需在翻转时交换图像。例如，通过 CSS，我可以在翻转时更改不透明度吗？如果您对如何在翻转时使用 CSS 操作图像以进行更改有任何其他想法，我很乐意。

谢谢！

score 5 · Accepted Answer

您可以将两个图像放在一个更大的图像中，将其用作背景图像并仅更改翻转时的位置。

score 3 · Accepted Answer

使用 CSS3，有一个不透明度选项。这样，当它们悬停在某物上方时，您就不会被迫重新加载图像。

#div {
  background-image: url('blah.png'); 
}

#div:hover {
  opacity: 0.5;
}

我不确定这是否是使用它的正确方法，因此您应该使用 google 获取更多示例。但是，您应该小心，因为可能并非所有浏览器都支持 CSS3。

score 2 · Accepted Answer

尝试:hover在标签上使用样式。它在早期的 IE 版本中可能没有得到很好的支持。但是您可以执行以下操作：

img {
    border: 1px solid black;
}
img:hover {
    border: 1px solid white;
}

3 回答 3