CSS和菜单活动状态

Question

如何设置菜单以使所选/活动菜单项右侧的项目没有背景图像。

没有选择状态的示例，只是为了显示如何添加小的3px宽度分隔符

ul li {
    background: url(nav-seperator.gif) no-repeat right top;
}

接下来，我需要使用重复的背景图像添加选定的状态：

li.active a, li a:hover {
    background: url(nav-active-repeat.gif) repeat-x;
}

如下例所示：

虽然我要删除的部分是红色部分：

我希望它看起来像这样：

理想情况下，我只想使用CSS而不将类添加到下一个项目中。

我在这里创建了一个基本版本：http://jsfiddle.net/6nEB6/3/

编辑：我已经添加了JSfiddle的打印屏幕和设计，因此您可以轻松比较并注意所选菜单项右侧的小图像。

Answer 1

<强>解决方案

如果通过“项目向右”表示分隔符图像，则您需要做的就是向右或向左添加与图像重叠的边距，并将缺少的像素添加到填充或边距 因此，如果我有一个21px的初始填充，我在悬停时得到的CSS可能是

li.active a, li a:hover {
    margin-left: -2px;
    padding-left: 23px;
}

当然，还有其他方法可以重叠该图像，但这就是我的表现方式。 在您当前的示例中，这将不起作用，因为分隔符位于不同的元素中并且重叠，它不会在其上方呈现，但在其下方。

以下示例将向您展示如何正确实施它。

---

示例

Here's an example只使用两张图片：背景和分隔符。该示例还演示了如何正确使用CSS类，而无需为每个新元素添加新类。 如果你想专门为第一个li元素添加背景，即。带圆角的选定背景只需添加此代码

li.active:first-child a, li:first-child a:hover{
    background: url(...);
}

因为它具有更高的特异性，它将覆盖该元素的先前悬停指令。

---

<强>建议

我建议您停止为每个导航器元素使用单独的图像。使用一个背景图像和分隔符可能会更好。 使用基于图像的导航有几个缺点，最大的搜索引擎爬虫和图像质量，缩放和渲染在不同的浏览器。

Answer 2

这可以使用+组合器（参见http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators），但只有在您将其切换以使分隔符图像位于左侧而不是右边：

li 
{ background: url(nav-seperator.gif) no-repeat left top; }
li.active, li:hover
{ background: url(nav-active-repeat.gif) repeat-x; }
li:first-child
{ background: none; }
li.active + li, li:hover + li
{ background: none; }

相反，你得到的问题是你最后没有分隔符。当然，您可以在末尾添加一个虚拟<li>：

li:last-child
{ width: 10px; }
li:last-child:hover
{ background: none; }

但请注意，+在Internet Explorer 6中不起作用，:last-child甚至无法在Internet Explorer 7中工作（后者可以通过使用.last轻松解决）。

就个人而言，我会使用Javascript来解决这个问题。现在只使用CSS就可以轻松解决这个问题。

如果我们拥有通用的CSS3支持，那将是另一回事。然后我们可以通过多种方式轻松添加最右边的分隔符（多个背景，li:last-child::after等）。当然，有时你可以依赖于良好的CSS3支持，例如当你只针对移动WebKit时。