通常，我們會用rgba(),設定背景顔色，在某個圖檔上，實作當滑鼠放在圖檔上出現半透明的效果，如下：
<!DOCTYPE>
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset-utf-8">
<title>title</title>
<style>
.div1
{
width:px;
height:px;
margin: auto;
background:url(../f_img/.jpg);
}
.div
{
width:px;
height:px;
margin: auto;
}
.div:hover
{
background:rgba(,,,);
}
</style>
</head>
<body>
<div class="div1">
<a class="div"></a>
</div>
</body>
</html>
可是，你會發現，明明沒用，但是按理說，a标簽的.div類屬性會使圖檔産生半透明遮蓋在圖檔上，可是沒有，現在，在a标簽中加上aaaaaa,儲存，重新整理，發現當滑鼠放在aaaaaa上時，出現了aaaaaa背景變成了藍色，為什麼？這是由于，a标簽是内聯元素{display:inline;}，設定的width和height是沒用的，在http://blog.sina.com.cn/s/blog_75efec5501015526.html有詳細介紹，然後，将body中的a标簽，改成div标簽，儲存，重新整理，滑鼠放在背景上，這時發現，整個的背景圖檔都出現了藍色，為何？因為div标簽是塊狀元素{display:block;}，它是可以設定設定大小的；a标簽時，.div{}裡面設定的寬高沒用，隻有aaaaaa撐開的部分有效，那麼，此時預設的大小，就是撐開部分，撐開的部分設為S1，是當滑鼠放在 S1上時，有.div:hover{}裡面說明的屬性，而.div呢，則是說明大小，是以，當a标簽時，你可以設定.div{display:block; },是的，将a标簽的display屬性改變，那麼，設定的寬高就有效了，這時你設定了滑鼠放在圖檔産生屬性的大小S2,此時，滑鼠放在任何位置，和div( 替換a )标簽是一樣的效果了，同時，你可以在.div:hover{}中添加display：inline;會如何？是的，儲存重新整理，如你猜的，那樣，滑鼠放在背景圖檔任何位置，隻有aaaaaa的背景部分變藍，這是由于你固定了屬性顯示的大小。下面是一段簡單的加了css3動态滑出div代碼：
<!DOCTYPE>
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset-utf-8">
<title>title</title>
<style>
.div1
{
width:px;
height:px;
margin: auto;
background:url(../f_img/.jpg);
}
.div1 .div
{
width:px;
height:px;
margin: auto;
transform: translateY(-px);
-webkit-transform: translateY(-px);
-moz-transform: translateY(-px);
-webkit-transition-duration:s;
-moz-transition-duration:s;
transition-duration:s;
}
.div1 :hover .div
{
-webkit-transform:translateY(px);
-moz-transform:translateY(px);
transform:translateY(px);
background:rgba(,,,);
}
</style>
</head>
<body>
<div class="div1">
<div class="div">aaaaaa</div>
</div>
</body>
</html>
當滑鼠放在div1背景圖檔上時，就能出現效果了，相容問題有待改進…..
![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)