2

カスタム CMS プラットフォーム上に構築された Web サイトに取り組んでいます。サイトの所有者は、「ホーム」ナビゲーション メニュー項目をホーム アイコン/画像に置き換えることを望んでいます。通常、これは簡単なことですが、私は HTML/PHP ファイルにアクセスできず、CMS ではメニュー項目にクラスを追加できません。Javascript も追加できないので、CSS で追加する必要があります。

CMS によって生成された HTML は、多かれ少なかれ次のようになります。

<header class="header">
  <nav>
    <ul>
      <li><a href="http://www.home.com/">Home</a></li>
      <li class="first"><a href="http://www.home.com/about">About</a>
        <ul>
          <li><a href="http://www.home.com/about/team">Team</a></li>
        </ul>
      </li>
      <li><a href="http://www.home.com/services">Services</a>
        <ul>
          <li><a href="http://www.home.com/services/financial">Financial</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

私は次のような方法でそれを達成できるかもしれないと考えました：

.header nav > ul > li:first-of-type {
  background: url('home.png') no-repeat center top;
  -webkit-transition: background-position 0.3s ease-in; 
     -moz-transition: background-position 0.3s ease-in; 
       -o-transition: background-position 0.3s ease-in; 
          transition: background-position 0.3s ease-in; 
}

.header nav > ul > li:first-of-type:hover {
  background-position: center bottom;
}

.header nav a[href="http://www.home.com/"] {
  color: transparent !important;
}

しかし、それはうまくいかないようです。私の構文はどこか間違っていますか、それとも何か不足していますか? CSS を直接使用してこれを行うためのより良い方法があれば、私はすべて耳にします。

このJS Fiddleで完全なコードを見ることができます。

ありがとう！

4

1 に答える 1

0

クラスの問題をクリアすると、保留中の問題は2つだけになります。背景の位置は中央ではなく左にある必要があり、a のセレクターは機能しません。前の要素に使用したスタイルを維持できます。さらに明確です。

.header nav > ul > li:first-of-type {
    background: url('http://placekitten.com/20/60') no-repeat left top;
    -webkit-transition: background-position 0.3s ease-in; 
    -moz-transition: background-position 0.3s ease-in; 
    -o-transition: background-position 0.3s ease-in; 
    transition: background-position 0.3s ease-in; 
}


.header nav > ul > li:first-of-type:hover {
    background-position: left bottom;
}

.header nav > ul > li:first-of-type a {
    color: transparent;
}

ところで、重要なことは必要ありませんでした

デモ

（子猫の画像を別の画像に変更するだけです）

于 2013-05-29T18:03:41.647 に答える