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

スタイルシートで使用する場合にのみオーバーライドされる CSSをcolor: black;使用して宣言しています。inline!important

次に、要素をターゲットにする必要があります。ドキュメント内のすべての要素を親の色にするようなものを指定しない限り、親要素の色を継承しaないh2ためではありません。具体的には、このセレクターを使用する場合は、以下で共有しているように、必要な他のターゲットを設定する必要はありません..aa {color: inherit;}ainherit.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

あなたのスタイルに以下のクラスを追加します

 #fois a:hover{
     color: white !important;
    }
于 2013-10-09T09:09:33.763 に答える
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 に答える