Question

我的问题是，当fois标签处于活动状态时，其颜色不会变为白色。我希望当任何标签处于活动状态时，文本颜色变为白色，背景变为橙色。下面是小提琴 http://jsfiddle.net/TfQU8/

<div class="wrap">

        <ul class="accordion1">
            <li>
                <h2 id="first">CMT</h2>
                <div class="content">
                    <ul class="accord">
                        <li>
                            <a href="#">main link1</a>
                            <ul>
                                <li><a href="#">Link One</a></li>
                                <li><a href="#">Link Two</a></li>
                                <li><a href="#">Link Three</a></li>
                                <li><a href="#">Link Four</a></li>
                                <li><a href="#">Link Five</a></li>
                            </ul>
                        </li>

                        <li>
                            <a href="#">main link2</a>
                            <ul>
                                <li><a href="#">Link One</a></li>
                                <li><a href="#">Link Two</a></li>
                                <li><a href="#">Link Three</a></li>
                                <li><a href="#">Link Four</a></li>
                                <li><a href="#">Link Five</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <h2><a href="#">FOIS</a></h2>
            </li>
            <li>
                <h2>ASP</h2>
                <div class="content">
                    <ul>
                    </ul>
                </div>
            </li>
            <li>
                <h2>PTT</h2>
                <div class="content">
                    content PTT
                </div>
            </li>
        </ul>
    </div>

css

.wrap {
    margin-left: 0px;
    margin-top: 0px;
    width: 100px;
}

.accordion1 {
    width: 178px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    border: 1px solid #ddd;
}

    .accordion1 h2 {
        font-size: 12px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0px;
        text-decoration: none;
        padding: .25em .25em .25em 2em;
        color: #333;
        background: url('compo_images/gradient_v_gray.gif') repeat-x;
        background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

        .accordion1 h2:hover {
            background: url('compo_images/gradient_v_orange.gif') repeat-x;
            color: white;
        }

    .accordion1 li h2 a {
        color: black;
        text-decoration: none;
    }

    .accordion1 li div.content {
        padding: 3px;
        background: #fcfbfb;
        border-bottom: 1px solid #ddd;
        /*border: 1px solid #ddd;*/
    }

    .accordion1 li:hover h2 {
        color: white !important;
        background-image: url("./compo_images/arrow_exp_n.gif");
        background:orange;
    }

        .accordion1 li:hover h2 a {
            color: white !important;
        }

.accord > li {
    padding: 0;
    list-style-type: none;
}

    .accord > li > a {
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding-left: 12px;
        color: #5f5c5c;
        background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
    }

    .accord > li > ul > li > a {
        text-decoration: none;
        color: #5f5c5c;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
        padding-left: 17px;
    }

    .accord > li > ul {
        list-style-type: none;
        text-align: left;
        margin: 0;
        padding: 1px;
    }

.accord {
    text-decoration: none;
    padding-left: 5px;
}

    .accord > li > a:hover {
        color: #f8b106;
    }

    .accord > li > ul > li > a:hover {
        color: #f8b106;
    }

.accordion1 > li > h2.active {
    color: white;
    background: orange;
}

一致

jQuery(function ($) {
    $('.accord li').hover(function () {
        $(this).find('ul').stop(true, true).slideDown()
    }, function () {
        $(this).find('ul').stop(true, true).slideUp()
    }).find('ul').hide()

    var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
    var $h2s = $lis.children('h2').click(function () {
        var $this = $(this), $t = $this.next();
        $contents.not($t).stop(true, true).slideUp();
        $this.toggleClass('active', !$t.is(':visible'));
        $t.slideToggle();
        $h2s.not(this).removeClass('active');
    })
})

Answer 1

所以你又回来了，你需要的是这个

Demo

.accordion1 > li > h2.active, .accordion1 > li > h2.active a {
    color: white;
    background: orange;
}

说明：

您有这个选择器.accordion1 > li > h2.active，其目标是h2元素，其中包含.active类，正如我昨天在here上解释的那样，您的a元素获胜了除非你指定继承，否则继承颜色，所以你的FOIS是用a包装的，所以为了定位它，我在你的CSS中添加了另一个选择器。

另一方面，您也可以使用color设为inherit

的选择器

.accordion1 > li > h2.active a {
    color: inherit;
}

Answer 2

如果你只想使用css：你应该使用 a:link,a:visited,a:hover,a:active要更改您的CSS，您可以为其中任何一个编写css代码

活动标签期间文本颜色变为白色

2 个答案: