jQuery - 修改元素的悬停 CSS答案

【问题标题】：jQuery - Modifying an element's hover cssjQuery - 修改元素的悬停 CSS
【发布时间】：2009-12-01 10:10:34
【问题描述】：

我正在创建一个可动态更改当前页面的自定义站点页面，以便您可以预览正在更改的内容。一切都运行良好，除了我使用的代码显然无法处理 :hover 和 :visited 等伪类。

代码很简单，我基本上是在做以下事情：

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

但是，这实际上并未将<a> 标记的悬停颜色设置为#ff0000。不过，如果我取下:hover，它就可以正常工作。有人对如何使它起作用有任何建议吗？

非常感谢！

编辑 1： 显然，我可能完全搞错了。更多信息表明我可以使用document.styleSheets.inlinestyle.rules 来修改它，尽管这显然只适用于 IE。任何更多的想法将不胜感激。

【问题讨论】：

在 css 中使用 a:hover 有什么问题？怎么不优雅？
@Loir Cohen - 我正在尝试根据所选颜色更新当前页面的 a:hover 链接。我实际上正在将其编译为添加到页面顶部的样式表，但我不希望用户必须刷新页面才能看到他们的更改。
这里有一个想法：为包含动态内容的包装器 div 设置一些类名，并将标签注入到包含动态生成的 CSS 文件的 DOM 中。有很多方法可以解决这个问题，但没有提供足够的信息。
通过将 :hover 放入选择器字符串中，您将其用作过滤器，这就是脚本在其中时完全停止工作的原因。看看docs.jquery.com/Selectors 了解他们的信息。

标签： jquery hover pseudo-class

【解决方案1】：

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

【讨论】：

【解决方案2】：

一种有趣的方法可能是使用像jQuery.Rules 这样的插件来创建新规则。

【讨论】：

是的，我刚刚发现，演示页面似乎无法满足我的需求。它适用于除伪类之外的所有内容。我还尝试了plugins.jquery.com/project/jquerycssrule，它应该可以工作，但根本不行。
jQuery.CssRule 似乎是答案。您打算如何使用它？
@BYK - jQuery.cssRule(selector, attribute, color); 似乎不适用于任何选择器。我知道变量（选择器、属性、颜色）是正确的，因为我把它们打印出来了。
谨慎使用。你需要做 jQuery.cssRule({'selector': [['attribute1', 'attributeValue1'], ['attribute2', 'attributeValue2']]});
@BYK - 我将它修改为使用$.tocssRule("body { color: white }");，除了悬停之外它工作正常。我想知道这个和 livequery 的组合是否可以工作......

【解决方案3】：

这不起作用的原因是 $("#links td.active a:hover") 匹配带有伪类“hover”的元素，当时它不会。您需要添加一个事件来执行此操作，例如 Lior 的回答。

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

【讨论】：

【解决方案4】：

嗯，我终于想出了如何让它按我想要的方式工作。这是基本代码：

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

【讨论】：

【解决方案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); }
);

如果您有多个需要更改的属性，效果会更好。

【讨论】：