在圖像鏈接後面滑動背景圖像

Question

因此，我有一個帶有菜單的html網頁。我已將菜單編碼爲帶有3個鏈接的列表。

該菜單由Illustrator PNG圖像組成：家庭，聯繫人等。我想實現的是當您將鼠標懸停在鏈接上時，某種顏色從左側滑動。這種特定的顏色也是一個Illustrator圖像。

我能夠做到這一點（與一個教程）與一個簡單的純文本的菜單，背景幻燈片和jQuery圖像：jQuery buttons, 但我想用2個圖像做到這一點。

我是否正確解釋自己？ 我該如何嘗試做到這一點？

Answer 1

有可以實現這幾個方面，這裏有3

1）在你的背景圖片精靈包括透明圖像。因此，您將兩個圖像合併爲一個背景圖像。然後，您只需相應地定位背景圖像。如果你不熟悉精靈，下面是一篇討論它們的帖子：CSS Sprite Button

2）將圖像硬編碼到鏈接中並使用css生成背景顏色。這樣你就不必使用單獨的圖像。例如： a：hover {background：＃f00; }

3）將圖像硬編碼到鏈接中，並使用背景圖像實現懸停效果。我不建議這樣做，因爲它會導致您的鏈接變得不可搜索和不可選。