Question

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

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

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

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

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

Answer 1

一些事情：

通过关闭＆lt; li＆gt;的填充来解决问题。然后把它放在孩子身上＆lt; a＆gt; - 它们占据的空间需要相同才能使悬停对齐。

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

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

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

圆形CSS选项卡

3 个答案: