23

タイトルは基本的にそれをすべて言います。

色を変更したい要素:hoverがありますが、クリックすると元の色に戻したいとします。だから、私はこれを試しました：

a:link, a:visited, a:active {
    background: red;
}
a:hover {
    background: green;
}

結局のところ、これは機能しません。何度も頭を悩ませた後、私は:hover状態が状態を上書きしていることに気づきました:active。これはこれによって簡単に解決されました：

a:link, a:visited {
    background: green;
}
a:hover {
    background: red;
}
a:active {
    background: green;
}

（1番目のルールと3番目のルールを組み合わせることができます）。

これがフィドルです：http：//jsfiddle.net/V5FUy/

私の質問：これは予想される動作ですか？私がこれを理解している限り、状態はほとんど常に状態を伴うので、状態:activeは常に状態をオーバーライドする必要があります。:hover:active:hover

4

8 に答える 8

14

はい、これは予想される動作です。

別の例を見てみましょう。2つのクラスを追加するだけで、

<ul>
<li class="item first">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item last">item</li>
</ul>

ここでは、クラスが最初にクラスアイテムと一緒になります。しかし、cssを間違った順序で宣言すると、目的の動作が得られません。

.first { background: blue; }
.item { background: red; }

ご覧のとおり、最後に一致したセレクターが使用されます。これはあなたの例と同じですが、それ以上の論理はありません。2つの疑似クラスは等しいと見なされるため、最後に一致した定義の勝利に同じルールが適用されます。

編集

疑似クラスは等しいです、それは勝つ最後に定義されたものです！これが私のポイントを証明するjsFiddleです：hoverの後に定義された：link、：link wins（test）したがって、：hoverが：linkをオーバーライドするというステートメントは間違っています。

于 2011-09-22T00:40:06.477 に答える
3

アクティブ状態は、ホバー状態の後に宣言する必要があります。CSSでは、アクティブ状態の前にアクティブ状態をまとめて、トリガーされないようにします。

以下のように、適切な操作順序を指定すると、正常に機能します。

a.noworks:link, a.noworks:visited {
    background: red;
}

a.noworks:hover {
    background: green;
}

a.noworks:active {
    background: red;
}

だから、あなたの質問に答えるために、はい、これは予想される動作です。

操作の順序は次のとおりです。

a:link
a:visited
a:hover
a:active
于 2011-09-22T00:34:20.940 に答える
2

:hover定義した後に定義した最初のコードでは、 「上書き」した:activeためです。第二に、それは逆で、上書きします。:hover:active:active:hover

于 2011-09-22T00:32:04.530 に答える
0

これがその仕組みであり、その理由を説明しようと思います。ご存知のとおり、CSSはスタイルを適用するときにドキュメントの検索を続行し、要素に最も固有のスタイルを適用します。

例：

li.betterList { better list styling here }

より具体的で上書きされます

li { list styling here }

そして、これらのPuesdoセレクターはすべて同じ特異性と見なされるため、最後の行が前の行を上書きします。これは、W3Schoolsのメモで確認されています

注:: activeを有効にするには、CSS定義で：hover（存在する場合）の後に来る必要があります。

このCSSをjsfidleにスローして、同じ特異性であるため上書きされるのを確認することもできます

.works {background: red}
.works {background: green}
于 2011-09-22T00:48:25.967 に答える
0

編集：

申し訳ありませんが、質問を誤解しています。

基本的に、（マウスポインターを使用して）アクティブ状態にあるときは、実際にはホバー状態にもなります。したがって、CSSルールに基づいて、スタイルシートの最後のルールを読み取ります。

リンクにカーソルを合わせてマウスキーを押したままにすると、pseudクラスを通常のクラスとすると次のようになります。

<a class="active hover"></a>

したがって、CSSが

.active{color:green}
.hover{color:red}

それは赤を適用します

しかし、あなたのcssが

.hover{color:red}
.active{color:green}

緑を適用します

W3Cから

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

A：hoverはA：linkおよびA：visitedルールの後に配置する必要があることに注意してください。そうしないと、カスケードルールがA：hoverルールの「color」プロパティを非表示にするためです。同様に、A：activeはA：hoverの後に配置されるため、ユーザーがアクティブ化してA要素にカーソルを合わせると、アクティブカラー（ライム）が適用されます。

于 2011-09-22T00:20:16.260 に答える
0

これは、ほとんどの人が常にルールのグループの最後に疑似クラスを配置する限り、予想される動作です。:hover

宣言の順序は疑似クラスで重要になるため（詳細はhttp://reference.sitepoint.com/css/pseudoclassesを参照）、CSSの他のルールと同様に、最終的なルールが優先されます。

ほとんどの人にとって、私は望ましい行動だと思います：

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}

:activeはあまり役に立たないので、省略されます...またはと組み合わせa:linkてa:visited...そしてそれはによって上書きされますa:hover

W3Cはここでそれを詳しく説明しています：

A：hoverはA：linkおよびA：visitedルールの後に配置する必要があることに注意してください。そうしないと、カスケードルールがA：hoverルールの「color」プロパティを非表示にするためです。同様に、A：activeはA：hoverの後に配置されるため、ユーザーがアクティブ化してA要素にカーソルを合わせると、アクティブカラー（ライム）が適用されます。

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

W3schoolsでさえこれを正しく理解しています：

注：a：hoverは、CSS定義でa：linkとa：visitedの後に来る必要があります。

注：効果的にするには、CSS定義のa：hoverの後にa：activeを指定する必要があります。

http://www.w3schools.com/css/css_pseudo_classes.asp

于 2011-09-22T01:02:14.357 に答える
0

少なくとも、リンク（またはボタン）でのユーザーインタラクションの流れを考慮する必要があると思います。

いつもの、

  1. :link常にデフォルト（手つかず）でした、
  2. 次に、ユーザーがボタンをポイントすると、それが:hover機能します。
  3. ユーザーがリンクまたはボタンをポイントすると、クリックします。そこにユーザーが入ります:active。

これは、リンク（またはボタン）を操作する方法の標準的なシーケンスです。を除いて:visited、結果はユーザーが以前にリンクを押した場合にのみ明らかです。

リンクを処理するときは、ニーモニック：' L o V e HA te'を覚えておくと非常に役立ちます（ボタンでは機能しないを除く:visited） 。

ただし、本当にオーバーライドを実行したい場合、たとえば、アクティブ状態ですでにアクセスされたリンクの色を変更したい場合は、次のようにすることができます。

a:visited:active {
     color: red;   
}

ただし、重要なのは、必要がない場合は標準シーケンスを変更しないようにすることです。

于 2011-09-22T04:21:35.530 に答える
0

：not（）セレクターを使用すると、宣言の順序に関係なく、：active疑似クラスで：hover疑似クラスをオーバーライドできます。

a:link, a:visited, a:active {
    background: red;
}

a:hover:not(:active) {
    background: green;
}

このように、：hoverセレクターは、：activeセレクターがトリガーされていない場合にのみトリガーされます。

于 2021-02-25T15:52:15.377 に答える