當滑鼠移過圖片時，讓文章中的圖片由暗變亮

參考文章: Highlight Image onMouseover (Opacity)

這篇其實是個很舊的CSS技巧，一般的 HTML+CSS 都能使用，並不限定只能在 Google Blogger 中使用，只是怕很久沒用而忘了，所以又把它翻出來作一下紀錄

一般在 </head> 前面的 CSS 區域，或是單獨的 CSS 檔案 (Blogger 則會在 ]]></b:skin> 前面)，加入下列 CSS語法:

.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

在文章中類似 <a herf="..." > <img ...> 的地方，加入 class="highlightit"，例如：

<a href="http://www.cssdrive.com/" class="highlightit"><img border="0" src="test.gif"></a>
<a href="http://www.google.com/" class="highlightit"><img border="0" src="test.jpg"></a>

 

如果要製作當滑鼠移動到圖片時，在圖片外邊產生一有顏色的框框，可以參考 Highlight Image onMouseover (border)。