jQuery - изменение элемента при наведении css

Question

Я создаю страницу настройки сайта, которая динамически изменяет текущую страницу, чтобы вы могли видеть предварительный просмотр того, что вы меняете. Все работает довольно хорошо, за исключением того, что код, который я использую, по-видимому, не может обрабатывать псевдоклассы, такие как :hover и :visited.

Код очень прост, в основном я делаю следующее:

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

Однако на самом деле это не устанавливает цвет наведения тега <a> на #ff0000. Это работает нормально, если я снимаю document.styleSheets.inlinestyle.rules хотя. У кого-нибудь есть предложения относительно того, как заставить это работать?

Большое спасибо!

Правка 1: Очевидно, я могу ошибаться вообще. Еще немного информации показывает, что я мог бы использовать <=> для его изменения, хотя, очевидно, это работает только в IE. Буду признателен за любые идеи.

Answer 1

Ну, я наконец-то понял, как заставить это работать так, как я хотел. Вот основной код:

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 являются значениями скрытых входных данных. Хотя мне не очень нравится такой подход, похоже, он выполняет свою работу.

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

Интересным подходом может быть создание новых правил с помощью плагина, например jQuery.Rules .

Answer 4

Причина, по которой это не работает, заключается в том, что $ (" #links td.active a: hover ") сопоставляет элементы с классом psuedo " hover " ;, которого на тот момент не будет. Для этого вам нужно добавить событие, например, ответ Лиора.

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

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

Это работает лучше, если у вас есть более одного атрибута, который нужно изменить.