2010-12-03 5 views
2

私はこのどこかを見てきましたが、私はそれが正しいかどう詳細は私に言って見つけることができません。アクティブ:ホバーのようなアクティブとホバーの擬似セレクタを組み合わせるのは正しいですか?

.selector a:active:hover { color: #777; } 
.selector a:hover:active { color: #777; } 

私はそれがあった2の1覚えていません。

いずれにせよ、Firefoxはそれを気に入っていないようではなく、何もしません。

悪い練習を示すチュートリアルの別の例ですか?

答えて

7

どちらも問題ありません(同じです)。私はちょうどFirefox 4.0b6/Macでテストしました。それは私が期待するように正確に動作します。以下の例では、リンクをポイントすると赤くなり、マウスボタンを押したままにすると緑色に変わります。

<!DOCTYPE HTML> 
<title>Test</title> 
<style> 
a:hover { color: red; } 
a:active { color: yellow; } 
a:hover:active { color: green; } 
</style> 
<h1><a href="test">gggg</a></h1> 

しかし、キーボードよりもマウスで活性化されると、リンクが異なっスタイルにしたいことは珍しいです。

古典的な間違いをしている可能性があります。 :activeは、「href属性の値が現在のページのURIに解決されたとき」ではなく、「起動中(マウスボタンが押されている間)」を意味します。

「href属性の値が現在のページのURIに解決されたとき」という意味の擬似クラスはありません。そのために古典的なパターンは「現在の」または「選択された」クラスをサーバーに送信してからHTMLをクライアントに送信します。

+0

あなたはそうです、マウスが押された(アクティブな)ときに実際に動作します。私はこの構文がアクティブORホバーを意味することを期待していたので、ホバーだけをテストしました。何もしなかったので、動作していないと仮定しました。 – pnichols

+0

CSSセレクタで "or"を取得する唯一の方法は、グループ化することです( '、'と複数の完全なセレクタを使用して) – Quentin

+0

アクティブでホバリングを意味するならば、役に立たないかもしれませんが:珍しい)。私はそれがアクティブとホバーを組み合わせるために使用できると思ったので、シンタックスを減らしました。 – pnichols

-3

正しくないため動作しない場合は、別々にする必要があります。

.selector a:active, .selector a:hover { color: #777; } 
+0

私のdownvoteではなく、CSSでは、カンマは「または」を意味します。 OPは "と"を探しています。 –

+0

いいえ、それは正しくありません。コンマは、複数のルールが定義を共有していることを意味します。コンマなしでは、私はクラスセレクタを持つ要素をアンカー要素とし、その下にセレクタの別の要素を追加したいと言っています。 –

+0

これに追加するには、「AND」は無関係です。要素は:activeと:hover状態を同時に共有することはできません。 –

-2

a.selectorあるべき:活性:ホバー{色:#777。 }

a.selector:ホバー:アクティブ{color:#777; }

NOT

.selector:活性:ホバー{色:#777。 }

。セレクタa:ホバー:アクティブ{カラー:#777; }

シンプルで:P

+3

OPがマークアップを投稿しなかったので、クラス 'selector'が' a'要素に存在するかどうかを知る方法がありません。 OPの例は 'a 'のコンテナに' selector'クラスがあれば問題ありません。 – lincolnk

関連する問題