0

現在のページを動的に変更するカスタマイズ サイト ページを作成して、変更内容のプレビューを表示できるようにしています。:hover私が使用しているコードが明らかにやなどの疑似クラスを処理できないことを除いて、すべてがうまく機能しています:visited。

コードは非常に単純です。基本的には次のことを行っています。

$("#links td.active a:hover").css("color", "#ff0000");

ただし、これは実際には<a>タグのホバー カラーをに設定しません#ff0000。でも外せば問題なく使え:hoverます。これを機能させる方法について誰か提案がありますか?

どうもありがとう！

編集1:どうやら、私はそれについて完全に間違っているかもしれません。いくつかの詳細情報は、これを変更するために使用できる可能性があることを示していますがdocument.styleSheets.inlinestyle.rules、これは明らかに IE でのみ機能します。これ以上のアイデアは大歓迎です。

4

5 に答える 5

6 
$('#links td.active a').hover(
  function()
  {
    $(this).data('prevColor', $(this).css('color')).css('color', '#FF0000');
  },
  function()
  {
    $(this).css('color', $(this).data('prevColor'));
  });
于 2009-11-30T21:46:59.900 に答える
1

興味深いアプローチは、jQuery.Rulesのようなプラグインを使用して新しいルールを作成することです。

于 2009-11-30T22:13:05.073 に答える
0

これが機能しない理由は、 $("#links td.active a:hover") が疑似クラス "hover" を持つ要素に一致するためです。Lior's answer のように、これを行うにはイベントを追加する必要があります。

$("#links td.active a").hover();

于 2009-11-30T21:54:20.213 に答える
-1

CSS を別のクラスに配置し、必要に応じて要素に追加することができます。

#links td.active a:hover { color: #yourdefaultcolor; }
#links td.active a.preview:hover { color: #ff0000; }

JavaScript で次のようなものを使用します。

$('#links td.active a').hover(
  function(){ $(this).toggleClass("preview", true);  },
  function(){ $(this).toggleClass("preview", false); }
);

変更が必要なアトリビュートが複数ある場合は、より効果的です。

于 2009-11-30T22:05:06.070 に答える