javascript - jQuery を使用して疑似クラスをターゲットにする

Question

アクセスできないスタイルシートに次の 2 つのスタイルがあります。

a:link {
  font-size: 150%;
}

a:hover {
  font-size: 150%;
}

jQuery を使用して、ここで a:link と a:hover の両方のフォント サイズを 100% に変更するにはどうすればよいですか。

Answer 1

@Phil は上記のコメントで正しく、ルールを直接追加できます。<style/>実行時に要素を追加すると<head/>、ページの再レンダリング (?) がトリガーされ、新しいスタイルが適用されます! フィドルから：

$('head').append('<style type="text/css">a:hover{color:red !important;}</style>');

何らかの理由で、headセレクターが正しくないように見えますが、動作します! 5 秒以内にリンクにカーソルを合わせると (議論のため)、スタイルが設定されます。

Answer 2

jQuery でのみ使用できると仮定すると、次のコードを使用できます (上記の css をリモート ファイルからインポートした後に、このスクリプトを必ず記述してください)。

$(document).ready(function(){
    $('a').on('hover',function(){
        $(this).css({'font-size':'100%'});
    }).css({'font-size':'100%'});    
});​

ページに単純なスタイルを追加!importantしてルールに追加することでもできますが

<style type="text/css">
a:link {
  font-size: 100% !important;
}

a:hover {
  font-size: 100% !important;
}
</style>

JSFiddle の例