0

フロント ページ (投稿が表示されるページ) のリンクは赤で、ホバーすると白に変わります。しかし、私の STATIC ページでは、ホバーしたときにリンクを白と赤にしたいのですが、どうすればいいですか? Tumblr では、静的ページに HTML を追加できます。

これは、私のフロント ページの CSS マークアップです。

  a{
  text-decoration:none;
   color:red;
   }

 a:hover{
 color:white;
-moz-transition: all .2s;
 -webkit-transition: all .2s;
 -o-transition: all .2s;
   transition: all .2;
  }

これは私の静的ページのhtmlです

   <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>

静的ページは、フロント ページの html と css を継承します。追加してみました

       <div id="page"> </div>

となるように

<div id="page">
 <ul id="list">
    <li><a href="http://tumblr.com">test </a></li>
      </ul>
  </div>

そして、css でスタイルを設定しようとしています:

ul.list li {
color: white

}

しかし、これはうまくいきません.. :(誰かがここで私を助けてくれますか?

4

1 に答える 1

0

2 番目のスタイル宣言で実際にアンカー タグをターゲットにしていないため、機能していません。試す：

#page #list a {
    color: #fff; /* white */
}

これはホバー状態を変更しませんが、色を変更します。ホバー状態を変更するには、上で定義した一般的な a:hover をオーバーライドするために、特にそれをターゲットにする必要があります。

':visited' スタイルも定義する必要があります。そうしないと、これらの変更が反映されない可能性があります (リンクが既にアクセスされているため)。

#page #list a:visited {
    color: #fff; /* white */
}

または、すべての州を 1 つのブロックで定義することもできます。

#page #list a, #page #list a:visited, #page #link a:hover, #page #list a:active {
    color: #fff; /* white */
}

明確でない場合、最初のセレクターは最初のリンクを対象とし、2 番目はアクセスされたリンクを対象とし、3 番目はリンクのホバー状態 (つまり、マウスがリンク上にあるときのスタイル) を対象とし、 4 番目は、リンクのアクティブな状態 (つまり、リンクが実際にクリック/タップされているとき) を対象としています。

また、ID による選択に正しいセレクターを使用していません。「.」クラスで選択し、'#' で ID で選択します。

于 2013-08-17T06:48:31.730 に答える