jQuery - 修改元素的悬停css

时间:2009-11-30 21:42:02

标签: jquery hover pseudo-class

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

代码很简单,我基本上做了以下几点:

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

但是,这实际上并未将<a>标记的悬停颜色设置为#ff0000。如果我取消:hover,它的工作正常。有人建议如何让它发挥作用吗?

非常感谢!

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

5 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

这不起作用的原因是$(“#links td.active a:hover”)匹配psuedo-class“hover”的元素,当时这些元素将为none。你需要添加一个事件来做这件事,比如Lior的回答。

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

答案 3 :(得分: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);
}

请注意,selectorattribute是隐藏输入的值。虽然我不太喜欢这种方法,但它似乎完成了工作。

答案 4 :(得分:-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); }
);

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