如何使用a：hover显示背景图像

Question

http://jsfiddle.net/gUckp/

在上面的演示中，我想在菜单项的中心显示橙色圆形图像。

然而，我无法显示所有图像。底部被切断。

我如何使用CSS？

提前致谢。

Answer 1

在display:inline;项目上使用li时，系统会忽略您提供的height属性。将:hover放在li项上，而不是a标记，它可以正常工作。您使用的height和line-height变得多余。

Updated jsfiddle

Answer 2

您的标签需要块规范。

请参阅：http://jsfiddle.net/gUckp/16/。

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

图像在样本中无法正确显示的原因是因为它被放置在标记渲染块大小之外。

修改

Firebug极大地帮助解决了这些类型的问题。它允许您检查元素等。我建议将其添加到您的开发工具包中。

Answer 3

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。享受！