圆形CSS选项卡

Question

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

首先，这里是标签网站的链接很难解释。 请将鼠标悬停在选项卡的左侧以了解我的问题。我在下面解释过。

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

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

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

Answer 1

一些事情：

通过从<！> lt; li <！> gt;中删除填充来解决问题。然后把它放回给孩子<！> lt; a <！> gt; - 它们占据的空间需要相同才能使悬停对齐。

现在你有一个不同的问题，左角没有显示。通过使a和a:hover的背景颜色等于transparent而不是颜色来解决这个问题 - 现在<！> lt; li <！> gt;可以透过。

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

编辑：没有图像交换的css翻转描述此处

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。