滚动没有图像变化

Question

我有一个小缩略图，我想在鼠标滑过它时改变它。我想知道是否有办法在没有交换翻转图像的情况下这样做。例如，通过CSS我可以在翻转时改变不透明度吗？如果您对如何使用CSS操作图像进行翻转以进行更改有任何其他想法，我会打开。

感谢名单！

Answer 1

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

Answer 2

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

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

#div:hover {
  opacity: 0.5;
}

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

Answer 3

尝试在代码上使用:hover样式。在早期的IE版本中可能不会得到很好的支持。但你可以这样做：

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