如何设置菜单以使所选/活动菜单项右侧的项目没有背景图像。
没有选择状态的示例,只是为了显示如何添加小的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的打印屏幕和设计,因此您可以轻松比较并注意所选菜单项右侧的小图像。答案 0 :(得分:2)
<强>解决方案强>
如果通过“项目向右”表示分隔符图像,则您需要做的就是向右或向左添加与图像重叠的边距,并将缺少的像素添加到填充或边距 因此,如果我有一个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(...);
}
因为它具有更高的特异性,它将覆盖该元素的先前悬停指令。
<强>建议强>
我建议您停止为每个导航器元素使用单独的图像。使用一个背景图像和分隔符可能会更好。 使用基于图像的导航有几个缺点,最大的搜索引擎爬虫和图像质量,缩放和渲染在不同的浏览器。
答案 1 :(得分:1)
这可以使用+
组合器(参见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时。