Question

我的问题是当我将鼠标悬停在fois标题上时，它的文字没有变成白色我不知道我错在哪里。或者要包括什么。请帮助我...... ..
当fois选项卡处于活动状态时，另一个问题是文本的颜色显示为白色

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <!--  <link href="css.css" rel="stylesheet" />-->
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="accord.js"></script>
        <style>
            .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 div.content {
                    padding: 3px;
                    background: #fcfbfb;
                    border-bottom: 1px solid #ddd;
                    /*border: 1px solid #ddd;*/
                }

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

            .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: url('compo_images/gradient_v_orange.gif') repeat-x;
            }

        </style>
    </head>

    <body>
        <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 id="fois"><a href="#" style="text-decoration:none;color:black;">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>
        <!-- wrap -->
    </body>
    </html>

根据文件

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

因为它包含在<a></a>标记中，而其他标记未包含在<a>

中

Demo

<li>
   <h2 id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>

Answer 2

您使用color: black; CSS声明inline，如果您在样式表中使用!important，则只会覆盖该内容。

其次，您需要定位a元素，而不是h2，因为a不会继承父元素颜色，除非您指定类似a {color: inherit;}的内容，这将使a成为{ {1}}文档inherit父色中的{1}}元素，或者如果您使用此选择器，则可以使用.accordion1 li h2 a {color: inherit;}，而不是您不必定位a需要像我在下面分享的那样..

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

我建议您删除内联样式，而不必再使用!important。

Demo

Answer 3

更改

<h2 id="fois"><a href="#" style="text-decoration:none;color:black;">FOIS</a></h2>

要

<h2 id="fois"><a href="#">FOIS</a></h2>

并改变

.accordion1 li:hover h2 {

要

.accordion1 li:hover h2,
.accordion1 li:hover h2 a {

Answer 4

在我看来你的问题在于锚元素的内联样式。这比样式表中的任何样式都具有更高的特异性，因此应该适度使用。

如果删除

color:black

来自锚点，并添加：

color:black

为：

.accordion1 h2

这应该可以解决问题。

Answer 5

在你的风格中添加以下课程

 #fois a:hover{
     color: white !important;
    }

更改鼠标上特定标题的颜色

5 个答案: