如何为不同的条目创建具有不同背景图像的有序列表（HTML/CSS）？

我已经设置了这个导航栏菜单，它有一个多层背景，这样悬停和当前选项卡上的颜色就会改变。然而，到目前为止，我的颜色方案大部分是绿色的，在同一个列表中，我想让下一个标签“块”变成蓝色，第三个标签“块”变成红色。我有更多的图像准备多层和东西，但我似乎不能让该死的东西覆盖每个li条目的背景，因为主要的东西是编码在ol本身。它实际上只是在“olvina{”和“olvinspan{”上加载图像；其余的选项（悬停、当前等）只是更改背景位置，以便我的多层图像向下转换到适当的状态

如果有帮助的话，我是基于这样的：他有标签列表，但我有我自己的背景，它在左边垂直向下

E：根据要求，代码片段：

<table width="100%" border="0" cellpadding=0 cellspacing=0><tr valign="top">
<td width="260px">
    <ol id="vin">
        <li class="au"><a href="#sc-aaaa"><span>Section A</span></a></li>
        <li class="au"><a href="#sc-bbbb"><span>Section B</span></a></li>
        <li class="au"><a href="#sc-cccc"><span>Section C</span></a></li>
        <li class="au"><a href="#sc-dddd"><span>Section D</span></a></li>
        <li class="au"><a href="#sc-eeee"><span>Section E</span></a></li>
        <li class="au"><a href="#sc-ffff"><span>Section F</span></a></li>
    </ol>
</td><td style="background:#ccc">
    <div class="content" id="sc-aaaa">
        <h2>Section A</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-bbbb">
        <h2>Section B</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-cccc">
        <h2>Section C</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-dddd">
        <h2>Section D</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-eeee">
        <h2>Section E</h2>
          Content goes here!
    </div>
    <div class="content" id="sc-ffff">
        <h2>Section F</h2>
          Content goes here!
    </div>
</td></tr></table>
activatables('section', ['sc-aaaa', 'sc-bbbb', 'sc-cccc', 'sc-dddd', 'sc-eeee', 'sc-ffff']);
</script>
</body>
</html>

---

它将有助于为元素定义特定的ID或类，然后您可以为每个ID或类指定背景图像

起初的 从链接的示例中：

---

嗯，您只能使用JavaScript解决方案来实现它，因为CSS规范不允许您设置父元素的样式。使用jQuery的示例：

<ul id="nav">
    <li data-color="#00f"><a href="#">Link</a></li>
    <li data-color="#0f0"><a href="#">Link</a></li>
    <li data-color="#f00"><a href="#">Link</a></li>
</ul>

---

你能提供一些示例标记和css，让我们看看你到目前为止得到了什么吗？可能需要一个比你提到的更具体的规则或一个

！important

。当然你可以使用

背景色：#ff0000；

，

背景色：#0000ff；

等。也不是图像。Smamatti，这不起作用；我只移动了bac把东西分成“ol#vin#au a{+”ol#vin#ma a{”和“ol#vin#au span{+”ol#vin#ma span{”而且它根本没有加载背景。我正在编辑帖子，并且很快就包含了我的HTML和CSS。为什么你认为这需要Javascript/jQuery？你实际上是通过脚本编辑CSS。这对停用的脚本不起作用，需要更高的性能，而且可能没有那么多障碍。此外，还有像

dat这样的自定义属性a-color

不是有效的HTML。

数据-

属性是有效的HTML 5.5。同意。但在这种情况下，它仍然是XHTML 1.0Smamatti，我们谈论的是1ms操作。停用JS的用户将正常使用该站点，但没有完整的后台悬停。

<ol id="toc">
    <li><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

<ol id="toc">
    <li id="first_li"><a href="#introduction" class=" inactive"><span>Introduction</span></a></li>
    <li id="second_li"><a href="#step-1" class=" inactive"><span>Step 1: The structure</span></a></li>
    <!-- more ... -->
</ol>

/* Usual states */
#toc li#first_li {
    background-image: url('/img/first_background.jpg');
}

#toc li#second_li {
    background-image: url('/img/second_background.jpg');
}

/* Hover states */
#toc li#first_li:hover {
    background-image: url('/img/first_background_highlight.jpg');
}

#toc li#second_li:hover {
    background-image: url('/img/second_background_highlight.jpg');
}

<ul id="nav">
    <li data-color="#00f"><a href="#">Link</a></li>
    <li data-color="#0f0"><a href="#">Link</a></li>
    <li data-color="#f00"><a href="#">Link</a></li>
</ul>

var $nav = $("#nav");
$nav.find("li").hover(function () {
    $nav.css("backgroundColor", $(this).attr("data-color"));
}, function () {
    $nav.css("backgroundColor", "");
});