0

私がそのようなHTMLを持っているとしましょう：

<div class="foo">
    <div>Stuff</div>
</div>

そしてそのようないくつかのCSS：

.foo > div { display: none; }
.foo:after { /* rules */ }

こんなことができるようになりたい

.foo:after:hover > div { display: block; }

生成されたコンテンツ要素にカーソルを合わせて、子を表示しdivます。誰かがこれを行う方法を知っていますか？これまでの私の試みは無益でした。ありがとう。

4

4 に答える 4

2

この質問は、兄弟コンビネーターで：beforeまたは：after疑似要素をターゲットにできますか？の反対のようです。

あなたの場合、疑似要素に疑似クラスを適用することはできません。これは、疑似要素がオンになっている場合にのみスタイルを適用することを選択でき、:hover その生成要素は選択できないことも意味します。代わりに、生成要素の疑似クラス状態に応じて、この生成要素がセレクターのサブジェクトである場合にのみ、疑似要素を選択できます。

また、前述のように、疑似要素はDOMの一部ではありません。したがって、上記の質問に対する私の回答（上記のリンクの説明）に示されているように、同じ生成要素内の実際の子に対して相対的な疑似要素に到達できない方法と同様に、次のようになります。

a[href^="http"] img ~ :after

同じ生成要素内の疑似要素に対して実際の要素を選択することはできません。

.foo:after > div

要約すると、次のセレクターが機能しない理由は次のとおりです。

.foo:after:hover > div

2つあります：

  1. 疑似要素は疑似クラス状態を持つことができないため、:after:hover無効になります。

  2. ここでのセレクターの主題はではありません.fooがdiv、なので、に:after適用することはできません.foo。したがって、疑似要素を別のセレクターに適用した後、セレクターのサブジェクトとして実際の要素を選択しようとしても意味がありません。

div本当にonを表示する必要はなく.foo:hover、別の子要素に表示する必要がある場合、JavaScriptを使用せずにこれを回避する唯一の方法は、その下に.fooある別の実際の要素をdiv（後ではなく）作成することです。

<div class="foo">
    <div></div>
    <div>Stuff</div>
</div>

これは、以前の兄弟セレクターがないためです。代わりに使用できる隣接する兄弟セレクターは、次の兄弟:after >を選択するためだけのものです。

.foo > div:first-child + div { display: none; }
.foo > div:first-child { /* rules */ }
.foo > div:first-child:hover + div { display: block; }
于 2012-07-24T08:26:44.757 に答える
1

DOMに存在しないため、生成されたコンテンツを操作することはできません（アクセスは可能ですが、少なくともこれまでのところ、読み取り専用です）。あなたが持っている唯一のオプションはそれ自体で使用:hoverする.fooことです：

.foo:hover > div { }

もちろん、生成されたコンテンツのスタイルを次のように変えることもできます:hover。

.foo:hover::after { }

しかし、それはおそらくあなたがやりたいことの一部ではないのではないかと思います。

また、セレクターは次のように記述されています。生成されたコンテンツの子の.foo:after:hover > divスタイルを設定しようとします。divそれが持つことはできません。

于 2012-07-23T22:58:06.137 に答える
0

このソリューションを試してください：http：//jsfiddle.net/QERPq/4/。

それはあなたが求めているものかもしれないし、そうでないかもしれません。

HTML：

<div class="foo">pre-hover stuff</div>

CSS：

.foo > div {
    display: none;
    font-size: 200px;
}
.foo:after {
    content: '';
    display: block;
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 20px;
    background: yellow;
}
.foo:hover:after {
    display: block;
    content: 'Stuff';
    width: 40px;
    height: 40px;
    background: red;
}
于 2012-07-23T23:22:40.350 に答える
0

あなたは近かった。：after部分を捨てるだけです。

http://jsfiddle.net/QERPq/

更新： http： //jsfiddle.net/QERPq/2/ 基本的に、これは、このアイテムにカーソルを合わせると、次のアイテム（* =キャッチオール）を選択して表示することを意味します。

于 2012-07-23T22:59:02.073 に答える