Question

我把这块 n子 men起来,并有一个多层背景,使 color和现表上的肤色变化。然而,我迄今为止的彩色计划大多是绿色的,在同一个名单上,我想打上下一个石块的蓝色,第三块红。我有更多的图像可供多继器和戴上手,但我看不出花钱来压倒每一升入场的背景,因为主事是装在ol上。它只是把图像实际装上“L#vin a{”和“ol#vin%20{”;其他选择(hover, current,等)只能改变背景,因此我的多层形象转化为适当的国家。

如果它有所帮助,我将其依据如下:。他在那里拿着刺刀,但我有自己背景的左边垂直。

E: As requested, code snippets:

<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>

and the CSS:

ol#vin {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 16px Verdana, sans-serif;
}

ol#vin li {
    margin: 0 0 0 0;
}

ol#vin a {
    color: #ccc;
    display: block;
    height: 25px;
    padding-left: 30px;
    text-decoration: none;
}

ol #vin #au a {background: url(vtabs.png) no-repeat;}
ol #vin #ma a {background: url(vtabs2.png) no-repeat;}

ol#vin a:hover {
    background-position: 0 -52px;
    color: #000;
}

ol#vin a:hover span {
    background-position: 100% -52px;
}

ol#vin li a.active {
    background-position: 0 -26px;
    color: #fff;
    font-weight: bold;
}

ol#vin li a.active span {
    background-position: 100% -26px;
}

ol#vin span {
    display: block;
    line-height: 25px;
    padding-right: 30px;
}

ol#vin #au span {background: url(vtabs2.png) 100% 0;}
ol#vin #ma span {background: url(vtabs2m.png) 100% 0;}

Answer 1

这将有助于确定这些要素的具体识别和分类,然后,你可以具体说明每个身份证或类别的背景形象。

Original

http://blixt.org/articles/tabbed-navigation-using-cs#section=bonus” rel=“nofollow” http://blixt.org/articles/tabbed-navigation-using-css#section=bonus

<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>

Solution

HTML

<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>

CSS

/* 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 );
}

Answer 2

免费,只有采用“ Java”解决办法,才能实现这一目的,因为《社会保障法》的具体规定不允许你打上母子。 a. 使用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>

原文:

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

Original

Solution

HTML

CSS

友情链接