0

我的问题是当我将鼠标悬停在 标题上时，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');
    })
})
4

5 回答 5

2

因为它被包裹在<a></a>标签中而其他人没有被包裹在<a>

演示

<li>
   <h2 id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>
于 2013-10-09T08:56:30.380 回答
1

您正在color: black;使用CSS 声明，只有在您的样式表中inline使用它才会被覆盖。!important

其次，您需要定位a元素，而不是h2因为a不会继承父元素的颜色，除非您指定类似的东西a {color: inherit;}，这将使a文档中的所有元素成为inherit父颜色，或者具体来说.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了。

演示

于 2013-10-09T08:56:34.280 回答
0

改变

<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 {
于 2013-10-09T09:00:27.673 回答
0

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

如果你删除

color:black

从锚点，并添加：

color:black

到：

.accordion1 h2

这应该够了吧。

于 2013-10-09T09:00:41.477 回答
0

以您的风格添加下面的类

 #fois a:hover{
     color: white !important;
    }
于 2013-10-09T09:09:33.763 回答