390

どうすれば書き込み:hoverと:visited条件付けができa:beforeますか？

試しa:before:hoverていますが、機能していません。

4

7 に答える 7

551

これは、実際に何をしようとしているかによって異なります。

要素が疑似クラスと一致するときに単にスタイルを:before疑似要素に適用したい場合は、代わりに書く必要があります。疑似要素が疑似クラスの後にあることに注意してください（実際には、セレクター全体の最後にあります）。それらは2つの異なるものであることに注意してください。両方を「疑似セレクター」と呼ぶと、このような構文の問題が発生すると混乱します。aa:hover:beforea:visited:before

CSS3を作成している場合は、この区別を明確にするために、二重コロンで疑似要素を示すことができます。したがって、a:hover::beforeおよびa:visited::before。ただし、IE8以前などのレガシーブラウザー用に開発している場合は、単一のコロンを使用することで問題を回避できます。

疑似クラスと疑似要素のこの特定の順序は、仕様に記載されています。

セレクター内の単純なセレクターの最後のシーケンスに、1つの疑似要素を追加できます。

単純なセレクターのシーケンスは、コンビネーターによって分離されていない単純なセレクターのチェーンです。それは常にタイプセレクターまたはユニバーサルセレクターで始まります。他のタイプセレクターまたはユニバーサルセレクターはシーケンスで許可されていません。

単純なセレクターは、タイプセレクター、ユニバーサルセレクター、属性セレクター、クラスセレクター、IDセレクター、または疑似クラスのいずれかです。

疑似クラスは単純なセレクターです。ただし、疑似要素は、単純なセレクターに似ていますが、そうではありません。

:hoverただし、 1などのユーザーアクション疑似クラスの場合、ユーザーが疑似要素自体と対話し、要素とは対話しない場合にのみこの効果を適用する必要がある場合a、これは、レイアウトに依存するあいまいな回避策以外では不可能です。 。テキストで示されているように、標準のCSS疑似要素は現在疑似クラスを持つことができません。その場合、:hover疑似要素ではなく実際の子要素に適用する必要があります。

1 もちろん、:visited疑似要素はリンクではないため、これは質問のようなリンク疑似クラスには適用されません。

于 2011-04-25T10:10:47.190 に答える
133

：examplea:hover::beforeの代わりに書いてください。a::before:hover

于 2011-04-25T10:11:59.257 に答える
9

マウスオーバーでメニューリンクのテキスト（ホバーで別の言語のテキスト）を変更するには、次のようにします。

jsfiddleの例

HTML：

<a align="center" href="#"><span>kannada</span></a>

CSS：

span {
    font-size: 12px;
}
a {
    color: green;
}
a:hover span {
    display: none;
}
a:hover:before {
    color: red;
    font-size: 24px;
    content: "ಕನ್ನಡ&quot;;
}
于 2013-04-24T09:17:31.887 に答える
7

.card-listing:hover::after、、hoverをafter使用してみてください::。それが動作します。

于 2017-08-09T12:48:18.793 に答える
5

または、要素と要素に設定pointer-events:noneしてから、ホバーCSSを要素に追加することもできます。apointer-event:alla:before

a{
    pointer-events: none;
}
a:before{
    pointer-events: all
}
a:hover:before{
    background: blue;
}
于 2020-07-14T14:12:49.013 に答える
2

BoltClockの答えは正しいです。追加したいのは、疑似要素のみを選択する場合は、スパンを配置することだけです。

例えば：

<li><span data-icon='u'></span> List Element </li>

それ以外の：

<li> data-icon='u' List Element</li>

このようにあなたは簡単に言うことができます

ul [data-icon]:hover::before {color: #f7f7f7;}

これは、li要素全体ではなく、疑似要素のみを強調表示します。

于 2017-04-24T18:09:17.690 に答える
-1

このコードで行ったように、右角かっこ（ ">"）を使用して、アクションを1つのクラスのみに制限することもできます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
      font-size: 12px;
    }
    a {
      color: green;
    }
    .test1>a:hover span {
      display: none;
    }
    .test1>a:hover:before {
      color: red;
      content: "Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

注： hover：beforeスイッチは.test1クラスでのみ機能します

于 2015-07-30T17:16:47.007 に答える