css - a:target に基づく CSS セレクター

Question

これは私のHTMLです：

<p class="define"><a class="term" href="#jump" name="jump">jump</a> - Some description</p>

ブラウザがジャンプすると、クラス#jumpを強調表示したい。.define私が行った場合;

a.term:target { background-color: #ffa; -webkit-transition: all 1s linear; }

もちろん、強調表示するのはa. これを変更して完了するにはどうすればよいpですか? 以下のようないくつかのバリアントを試しましたが、どれも機能しません。

a.term:target .define { stuff here }

a.term:target p.define { stuff here }

a.term:target p { stuff here }

score 3 · Accepted Answer

CSS を使用して要素の親を変更することはできません。JavaScript の代替手段を使用する必要があります。

score 0 · Accepted Answer

あなたの<p>タグは何のターゲットでもありません。もしそうなら：

<p class="define" id="something">
   <a class="term" href="#something" name="jump">jump</a> - blah
</p>

次のようにスタイルできます。

a.term:target { background-color: #ffa; }

<a>しかし、それは実際にクリックされていることとは何の関係もありません。そのためにはハンドラーを使用する必要があります。onclick理想的には、クラスをターゲットに追加し、そのクラスに基づいてスタイルを設定します。

score 0 · Accepted Answer

CSS を使用して、ユーザーがページのどこにいるかを判断することはできません。これは JavaScript で実現できます。一からやり直すつもりがない場合は、Bootstrap のScrollSpyを使用することをお勧めします。

3 に答える 3