沒有圖像變化的滾動

我有一個小的縮略圖圖像，當鼠標滾過它時，我希望改變它。我想知道是否有辦法做到這一點，而不用交換翻轉圖像。例如，通過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

沒有圖像變化的滾動

回答

相關問題