jquery-修改元素的悬停css

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

一个有趣的方法可能是使用类似插件的 jQuery.Rules .

这不起作用的原因是$(“links td.active a:hover”)与psuedo类“hover”匹配元素,此时该类将为无。您需要添加一个事件来执行此操作,如lior的答案。

$(“links td.active a”).hover();

好吧,我终于想出了如何让它按我想要的方式工作。基本代码如下:

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 是隐藏输入的值。虽然我不太喜欢这种方法,但它似乎能完成工作。

您可以将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); }
);

如果您有多个需要更改的属性,它会更好地工作。