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") 将元素与伪类“悬停”匹配，当时将不存在。您需要添加一个事件来执行此操作，例如 Lior 的回答。

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

于 2009-11-30T21:54:20.213 回答
0

好吧，我终于想出了如何让它像我想要的那样工作。这是基本代码：

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

于 2009-12-01T02:10:34.407 回答
-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 回答