jQuery—修改元素'；s悬停css

我正在创建一个自定义站点页面，动态更改当前页面，以便您可以看到所更改内容的预览。除了我正在使用的代码显然不能处理诸如

：hover

和

：visted

之类的伪类之外，一切都运行得很好

代码非常简单，我基本上做了以下工作：

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

但是，这实际上并没有将

标记的悬停颜色设置为

#ff0000

。不过，如果我取下

：hover

，效果很好。有没有人对如何让它发挥作用有什么建议

非常感谢

---

编辑1:显然，我可能完全搞错了。更多信息显示，我可能可以使用

document.styleSheets.inlinestyle.rules

对其进行修改，尽管这显然只在IE中起作用。如果还有其他想法，我将不胜感激。

这不起作用的原因是$（“#links td.active a:hover”）将元素与psuedo类“hover”匹配，那时候就没有了。您需要添加一个事件来完成此操作，如Lior的回答

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

---

$（“#links td.active a”）.hover（）

这不起作用的原因是$（“#links td.active a:hover”）将元素与psuedo类“hover”匹配，该类在当时将是无的。您需要添加一个事件来完成此操作，如Lior的回答

---

$（“#links td.active a”）.hover（）

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

---

如果需要更改的属性不止一个，则效果更好。

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

---

如果需要更改的属性不止一个，那么它的效果会更好。

一个有趣的方法可能是使用类似插件的插件创建新规则。

一个有趣的方法可能是使用类似插件的插件创建新规则。

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

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

函数updatePageCSS（输入，颜色）{
$（'style.new_css_styles'）.remove（）；
var new_css_styles=“”；
$（'input.colorPicker'）。每个（函数（）{
var id=$（this.attr（'id'）；
变量选择器=$（“#”+id+“#选择器”）.val（）；
var属性=$（“#”+id+“_属性”）.val（）；
var new_color=颜色；
if（$（this.attr（'id'）！=$（input.attr（'id'））{
new_color=$（this.val（）；
}
new_css_string+=选择器+'{'+attribute+'：'+new_color+'}\n'；
});
新样式+=“”；
$（'head'）.append（新样式）；
}

---

请注意，

选择器

和

属性

是隐藏输入的值。虽然我不太喜欢这种方法，但它似乎能完成工作。

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

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

函数updatePageCSS（输入，颜色）{
$（'style.new_css_styles'）.remove（）；
var new_css_styles=“”；
$（'input.colorPicker'）。每个（函数（）{
var id=$（this.attr（'id'）；
变量选择器=$（“#”+id+“#选择器”）.val（）；
var属性=$（“#”+id+“_属性”）.val（）；
var new_color=颜色；
if（$（this.attr（'id'）！=$（input.attr（'id'））{
new_color=$（this.val（）；
}
new_css_string+=选择器+'{'+attribute+'：'+new_color+'}\n'；
});
新样式+=“”；
$（'head'）.append（新样式）；
}

---

请注意，

选择器

和

属性

是隐藏输入的值。虽然我不太喜欢这种方法，但它似乎完成了任务。

在css中使用：hover有什么不对？这怎么不优雅？@Loir Cohen-我正试图根据所选颜色更新当前页面的a:hover链接。实际上，我正在将其编译为一个样式表，添加到页面顶部，但我不希望用户必须刷新页面才能看到他们的更改。下面是一个想法：将一些类名设置为包含动态内容的包装器div，并将一个标记插入包含动态生成的CSS文件的DOM中。有很多方法可以解决这个问题，但是没有提供足够的信息。通过将：hover放入选择器字符串，您将其用作筛选器，这就是为什么脚本在其中时会完全停止工作。看一看关于它们的信息。在css中使用：悬停有什么错？这怎么不优雅？@Loir Cohen-我正试图根据所选颜色更新当前页面的a:hover链接。实际上，我正在将其编译为一个样式表，添加到页面顶部，但我不希望用户必须刷新页面才能看到他们的更改。下面是一个想法：将一些类名设置为包含动态内容的包装器div，并将一个标记插入包含动态生成的CSS文件的DOM中。有很多方法可以解决这个问题，但是没有提供足够的信息。通过将：hover放入选择器字符串，您将其用作筛选器，这就是为什么脚本在其中时会完全停止工作。看看他们的信息。是的，我刚刚发现，演示页面似乎不能满足我的需要。它适用于除伪类以外的所有对象。我也试过哪个应该有效，但根本不行。jQuery.CssRule似乎就是答案。您打算如何使用它？@BYK-

jQuery.cssRule（选择器、属性、颜色）似乎对任何选择器都不起作用。我知道变量（选择器、属性、颜色）是正确的，因为我已经打印出来了。注意使用。您需要执行jQuery.cssRule（{'selector'：[['attribute1'，'attributeValue1']，['attribute2'，'attributeValue2']}）@BYK-I将其修改为使用
$.tocsrule（“body{color:white}”）和它的工作，除了悬停。我想知道这个和liveq的结合