如何與顯示背景圖片：懸停

Question

http://jsfiddle.net/gUckp/

在上面的演示中，我想顯示橙色圓形圖像下面的菜單項的中心，當它盤旋。

但是我無法顯示所有圖像。底部被切割。

我該怎麼用CSS做到這一點？

在此先感謝。

Answer 1

在li項目上使用display:inline;時，您給出的height屬性將被忽略。將:hover放在li項目上，而不是a標籤，它可以工作。您使用的height和line-height變得多餘。

Updated jsfiddle

Answer 2

background: #01291e url(http://demo.chevereto.com/images/hoverorang.png) no-repeat 50%; 

請參閱the updated jsfiddle。

編輯：抱歉，這不是你要求的。將再試...;）

編輯2：特此correct one。

編輯3：Or this one with a nicer focusrect size。請享用！

Answer 3

你的標籤需要一個塊規範。

參見：http://jsfiddle.net/gUckp/16/。

注意#nav a類的行display: inline-block;。

圖片在您的示例中無法正確顯示的原因是因爲它放置在標記呈現的塊大小之外。

編輯

Firebug在解決這些類型的問題有極大的幫助。它允許你檢查元素等，我建議將它添加到你的開發工具包。