如何在懸停圖像上提供自定義過渡效果

Question

我在我的頁面上有一些鏈接。該鏈接有背景圖片。當某人懸停在該圖像上時，新圖像必須帶有過渡效果。我需要this transition effect在這個鏈接，當你點擊下拉菜單時，彩色背景將從左到右。我希望當有人懸停在我的圖像上時，我的懸停背景圖像將以這種方式出現。但是，而不是來從左到右就像下拉菜單它應該從底部到。有沒有辦法通過CSS3做到這一點？如果沒有，你能幫我通過給jQuery下載樣本？如果我必須使用jQuery來做到這一點，我希望你能幫助我生成，因爲我不擅長jQuery。

我的HTML代碼示例：

<a href="dataMining.html" class="dMining">Data Mining</a> 
<a href="distributedSystems.html" class="dSystem">Distributed Systems</a> 

樣品的CSS代碼：

.dMining, .dSystem { 
    width: 139px; 
    height: 70px; 
    float: left; 
} 
.dMining { 
    background: url('../images/dataMiningNormal.png'); 
} 
.dMining:hover { 
    background: url('../images/dataMiningHover.png'); 
} 
.dSystem { 
    background: url('../images/distributedSystemNormal.png'); 
} 
.dSystem:hover { 
    background: url('../images/distributedSystemHover.png'); 
} 

採樣普通圖片：

樣品懸停圖片：

在此先感謝

Answer 1

合併圖像爲css sprite。然後動畫背景位置。

#my-menu-item { transition: background-position 1s } 
#my-menu-item:hover { background-position: 0px -[menuItemHeight]px }