圆形 CSS 选项卡

Question

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

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

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

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

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

Answer 1

几件事：

通过移除

的填充并将其放回子 来解决问题 - 它们占用的空间必须相同才能使悬停对齐。

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

可以显示出来了。

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

编辑：没有图像交换的 css 翻转描述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 中运行。