2

良い一日。

2つの3つのクラスが割り当てられている要素があります。2つはhtmlで割り当てられ、1つはjQueryによってアクティブクラスとして割り当てられます。

ここで、CSSでホバー効果を指定しますが、1つの特定の要素である「menuItemfirst」クラスに指定します。

HTML：

<ul>     
  <li class="menuItem first"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
</ul>

CSS：

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg2.png) no-repeat;
}

li.act .first, li.act .first:hover{
    /* The active state of the thumb - first class only! */
    background:url(img/active_bg1.png) no-repeat;
}

私はすぐ上のcssが間違っていることを知っています。正しい注釈は何ですか？クラスはjQueryによってアクティブな要素に割り当てられることに注意して
ください....act

4

4 に答える 4

5

あなたが言う時

li.act .first

あなたが本当に言っているのは、「クラスを持つ要素firstの中にクラスを持つ要素」です。<li>act

first「とクラスの両方を持つ要素を言いたい場合はact、スペースなしでそれらを書き出す必要があります。

li.act.first

その後、前述のセレクターのホバールールセットを実現するには、:hoverいつものように疑似を追加するだけです。

li.act.first:hover
于 2013-02-25T06:12:37.933 に答える
3

セレクターに余分なスペースがあります

使用する

li.act.first, li.act.first:hover{
    /* The active state of the thumb - first class only! */
    background:url(img/active_bg1.png) no-repeat;
}

セレクターli.act.firstは、li要素がクラスプロパティにactとの両方を持っていることを意味します。first

于 2013-02-25T06:11:57.880 に答える
0

現在のところ、両方の状態に同じ背景色を設定しています。したがって、代わりに、、を使用します

.first{background-color:#faa;}
.first:hover{background-color:#afa;}

ここでは、実際の例としてbackground-colorを使用しています 。http：//jsfiddle.net/mshtT/

于 2013-02-25T06:31:06.187 に答える
0

HTMLli class="menuItem firstの最初の要素で行ったように記述し、 2つの別個のクラスになる場合。1つの要素だけにホバー効果を適用するには、次のCSSを使用できます。limenuItemfirst

.first:hover {
    /*the effect you want*/ (eg. Background: #444;)
}

firstこれは、クラスを含む要素、つまり最初の要素にのみ適用されます。

于 2013-02-25T07:12:35.097 に答える