圆形CSS选项卡

Question

我使用CSS创建了一些圆形导航标签，在实施hover时遇到了麻烦。

首先，这是一个链接到网站Tabs，因为它很难解释。请将鼠标悬停在选项卡的左侧以了解我的问题。我在下面解释过。

我在#navigation li项目上设置了背景图像，其中包含左侧角落，然后我有第二个背景图像（右角）这是使用#navigation a设置的。

然而，当我将鼠标悬停在标签的左侧时，只显示了一小块背景，我认为这是因为只有li区域正在盘旋。显然，当你将鼠标悬停在剩下的部分上时，我希望整个标签能够突出显示。

这很难解释，所以如果你需要进一步询问我，请理解这个问题。

Answer 1

几件事：

通过从<li>中取出填充并将其放回到子<a>上来解决问题 - 它们占用的空间需要相同才能使悬停对齐。

现在你有一个不同的问题，左角没有显示。修复此问题，使a和a:hover的背景颜色等于transparent而不是颜色 - 现在 可以透过。

最后，我建议您将行为从完全另一个图像更改为具有不同背景位置的相同图像，因此翻转加载不可见。

编辑：css rollover没有图像交换描述here

Answer 2

使用jQuery，它非常简单！但你甚至可以尝试可扩展的盒子：

http://www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/

然后在悬停时更改背景图像。

Answer 3

或者你可以用以下代码替换你的li：hover和a：hover：

#navigation li:hover {
        background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
        cursor : pointer;
        }

#navigation li:hover a {
        background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
        color: #FFF;
}

请注意，IE6可能无法正常工作。