jQuery-要素のホバーCSSの変更

Question

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

コードは非常にシンプルで、基本的に次のことをしています：

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

ただし、これは実際には<a>タグのホバーカラーを#ff0000に設定しません。ただし、document.styleSheets.inlinestyle.rulesを外しても問題ありません。誰でもこれを機能させる方法について提案がありますか？

ありがとうございます！

編集1：どうやら、まったく間違っている可能性があります。いくつかの詳細情報から、<=>を使用して変更できる可能性があることがわかりますが、これはIEでのみ機能するようです。これ以上のアイデアは大歓迎です。

Answer 1

まあ、ついに思い通りに動作させる方法を見つけました。基本的なコードは次のとおりです。

function updatePageCSS(input, color) {
  $('style.new_css_styles').remove();

  var new_css_styles = "<style class='new_css_styles'>";

  $('input.colorPicker').each(function() {
    var id = $(this).attr('id');
    var selector = $('#' + id + '_selector').val();
    var attribute = $('#' + id + '_attribute').val();
    var new_color = color;

    if ($(this).attr('id') != $(input).attr('id')) {
      new_color = $(this).val();
    }

    new_css_string += selector + ' { ' + attribute + ': ' + new_color + ' }\n';
  });

  new_css_styles += "</style>";

  $('head').append(new_css_styles);
}

selectorおよびattributeは非表示入力の値です。私はこのアプローチがあまり好きではありませんが、仕事を終わらせるようです。

Answer 2

$('#links td.active a').hover(
  function()
  {
    $(this).data('prevColor', $(this).css('color')).css('color', '#FF0000');
  },
  function()
  {
    $(this).css('color', $(this).data('prevColor'));
  });

Answer 3

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

Answer 4

これが機能しない理由は、$（<！> quot; #links td.active a：hover <！> quot;）がpsuedo-class <！> quot; hover <！> quotの要素に一致するためです。 ;、その時点ではどれもありません。 Liorの答えのように、これを行うにはイベントを追加する必要があります。

$（<！> quot; #links td.active a <！> quot;）。hover（）;

Answer 5

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); }
);

変更が必要な属性が複数ある場合は、うまく機能します。