0

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

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

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

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

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

4

3 回答 3

4

几件事：

通过去掉 <li> 的填充并将其放回子 <a> 来解决问题 - 它们占用的空间需要相同才能使悬停对齐。

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

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

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

于 2008-12-30T17:12:29.513 回答
0

使用 jQuery 非常简单！但你甚至可以尝试可扩展的盒子：

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

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

于 2008-12-30T17:16:49.487 回答
0

或者你可以用这些替换你的 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。

于 2008-12-30T17:26:57.267 回答