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

这不工作的原因是，$（“＃链接td.active：悬停”）匹配与伪级“悬停”，这在时间将是无元件。你需要添加一个事件要做到这一点，像利奥尔的答案。

$（ “＃链接td.active一个”）悬停（）;

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

这工作得更好，如果你有比需要改变的一个属性以上。