圆形 CSS 选项卡

Question

我使用 CSS 创建了一些圆形导航选项卡，但在实现 hover 时遇到了麻烦。

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

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

但是，当我将鼠标悬停在选项卡左侧时，只显示一小块背景，我认为这是因为只有 li 区域悬停在上面。 显然，我希望整个选项卡突出显示，就像将鼠标悬停在其余部分上时一样。

这很难解释，所以如果您需要进一步询问我以了解问题，请这样做。

Answer 1

几件事：

通过去掉

的填充来解决问题。 并将其放回孩子身上 - 它们占据的空间需要相同才能使悬停对齐。

现在你有一个不同的问题，左角不显示。 通过将 a 和 a:hover 的背景颜色设置为 transparent 而不是颜色来解决此问题 - 现在

可以显示出来。

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

编辑：没有图像交换的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。