代码之家 › 专栏 › 技术社区 › Ronnie

圆形CSS选项卡

rounded-corners css

Ronnie · 技术社区 · 17 年前

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

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

我有一个背景图像设置 #navigation li 这个项目包含左侧角,然后我有一个第二个背景图像(右角),它是使用 #navigation a .

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

这很难解释,所以如果你需要进一步向我提问以了解问题,请回答。

3 回复 | 直到 7 年前

annakata 17 年前

有几件事:

通过取下衬垫来解决问题<李>并将其放回孩子身上<a>-它们占用的空间需要相同,才能使悬停对齐。

现在你有了一个不同的问题,左角没有显示。通过调整背景颜色来解决这个问题 a 和 a:hover 等于 transparent 而不是颜色-现在<李>可以显示出来。

最后,我建议您将行为从完全另一张图像更改为具有不同背景位置的同一张图像,这样翻转加载就不可见了。

编辑:描述了没有图像交换的css滚动 here

Luke 17 年前

使用jQuery非常简单! 但你甚至可以尝试一下可扩展的盒子:

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

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

Mg. 17 年前

或者,您可以将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。

推荐文章