1

そのため、テキストの代わりに画像を使用するナビゲーション バーがあります。1 つは通常の状態の画像で、もう 1 つはホバー状態の画像です。

ワードプレスでは、組み込みの .current-menu-item クラスを使用して現在表示しているページのメニュー項目に影響を与えることができます。これはテキストではうまく機能しますが、画像では機能しないようです。

特定のページにいるとき、関連するメニュー項目に、ホバー状態で使用される画像を表示したいと思います。

リンクは次のとおりです: http://ericbrockmanwebsites.com/dev4/コードの概要は次のとおりです。

CSS (制作が進んだらスプライトを使用します):

 #access {
    display:block;
    float:left;
    margin:30px 0;
    padding:0;
    list-style:none;
  }

 #access li {
    display:block;
    float:left;
    margin:0 5px;
    padding:0;
    list-style:none;
  }

  #access .home a {
    display: block;
    background-image: url(images/nav-btn-home.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .home a:hover, #access .home .current-menu-item {
    display: block;
    background-image: url(images/nav-btn-home-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .music a {
    display: block;
    background-image: url(images/nav-btn-music.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .music a:hover,   #access .music a:active {
    display: block;
    background-image: url(images/nav-btn-music-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

マークアップ (WP 組み込みのカスタム メニューを使用):

<nav id="access">
    <?php wp_nav_menu( array( 'theme_location' => 'main-nav' ) ); ?>
</nav> <!-- access -->

問題に対処する良い記事へのアドバイスやリンクは大歓迎です!

4

1 に答える 1

0

とクラスの両方liを含むを選択しようとしているようです。セレクターは、 クラスを持つアイテムの子であるを持つアイテムを選択します。home current-menu-itemcurrent-menu-itemhome

ただし、これはうまくいくはずです：

#access .home a:hover, #access .home.current-menu-item > a {
    display: block;
    background-image: url(images/nav-btn-home-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
}

.homeと の間にスペースがないことに注意してください.current-menu-item。このセレクターは、これらのクラスの両方を持つ任意の要素を選択します。

また、名前が付けられた画像が存在しないように見えたことに注意してくださいnav-btn-home-hover.png(または、少なくとも何らかの理由でインスペクターに読み込まれませんでした)。

楽しむ！

于 2013-03-28T21:28:16.200 に答える