jQuery - Modificando css foco de um elemento

Question

Estou criando uma página do site customize que muda dinamicamente a página atual de modo que você pode ver uma prévia do que você está mudando. Tudo está funcionando muito bem, exceto que o código que estou usando, aparentemente, não pode lidar com pseudo-classes, tais como :hover e :visited.

O código é muito simples, eu estou fazendo basicamente o seguinte:

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

No entanto, isso não realmente definir a cor de foco da tag <a> para #ff0000. Ele funciona muito bem se eu tirar o :hover embora. Alguém tem uma sugestão de como chegar a este trabalho?

Muito obrigado!

Editar 1: Aparentemente, eu poderia estar acontecendo sobre isso errado completamente. Algumas informações mais shows que eu poderia ser capaz de usar document.styleSheets.inlinestyle.rules para modificá-lo, embora isso aparentemente só funciona no IE. Qualquer mais ideias seria muito apreciada.

Answer 1

Bem, eu finalmente descobri como fazê-lo funcionar como eu queria. Aqui está o código básico:

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

Note que o selector e attribute são os valores das entradas escondidas. Enquanto eu realmente não gosto dessa abordagem muito grande, parece fazer o trabalho.

Answer 2

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

Answer 3

Uma abordagem interessante pode ser a de criar novas regras usando um plugin como jQuery.Rules .

Answer 4

A razão isso não funcionar é que $ ( "# links td.active a: hover") corresponde elementos com o pseudo-classe "hover", que naquele tempo será nenhum. Você vai precisar adicionar um evento para fazer isso, como resposta de Lior.

$ ( "# links td.active a") em foco ();.

Answer 5

Você pode colocar a CSS em uma classe diferente, e adicioná-lo aos elementos quando quiser.

#links td.active a:hover { color: #yourdefaultcolor; }
#links td.active a.preview:hover { color: #ff0000; }

Use algo como isso em JavaScript:

$('#links td.active a').hover(
  function(){ $(this).toggleClass("preview", true);  },
  function(){ $(this).toggleClass("preview", false); }
);

Ele funciona melhor se você tiver mais do que um único atributo que precisa mudar.