没有图像变化的滚动

我有一个小的缩略图图像，当鼠标滚过它时，我希望改变它。我想知道是否有办法做到这一点，而不用交换翻转图像。例如，通过CSS，我可以在翻滚时进行不透明度更改吗？如果您有任何关于如何使用CSS在滚动中操作图像以进行更改的其他想法，我已打开。没有图像变化的滚动

Thanx！

来源

2010-07-09 computersaurus

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

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

来源

2010-07-09 15:40:19

具体而言，IE <= 6不允许动态伪类选择超链接以外的任何元素。 – melhosseiny 2010-07-09 16:55:18

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

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

#div:hover { 
    opacity: 0.5; 
}

我不完全相信，如果这是正确的方式来使用它，所以你应该使用谷歌更多的例子。但是，您应该小心，因为并非所有浏览器都可能支持CSS3。

来源

2010-07-09 15:41:05 Marcin

这是很好的信息。谢谢！ – computersaurus 2010-07-09 15:59:40

为IE8添加-ms-filter：“progid：DXImageTransform.Microsoft.Alpha（Opacity = x）”，为IE5-7添加过滤器：alpha（opacity = x），为老版本的FF添加-moz-opacity和-khtml-旧版Safari和Konqueror的不透明度。 – melhosseiny 2010-07-09 17:09:23

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

来源

2010-07-09 15:44:05 jeroen

这些被称为CSS Sprites，我认为这是你正在寻找，查看此链接的更多信息： http://css-tricks.com/css-sprites/ – Dominique 2010-07-09 15:46:41

我熟悉CSS Sprites。如果用CSS来改变不透明度太麻烦，这就是我将要走的路。 Thanx的链接！ – computersaurus 2010-07-09 15:58:21

@Dominique，这是我正在寻找的词:-) – jeroen 2010-07-09 16:12:56

没有图像变化的滚动

回答

相关问题