Как усилить псевдо-правила CSS

Question

Есть ли способ усилить псевдо-правила CSS? то есть:
У меня есть список divs (плейлист), который я раскрашиваю по следующим правилам:

#playlist .playlist_item { 
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(odd) {
  background: #b3b3b3;
}

Теперь, когда воспроизводится песня, я использую setInterval и функцию Janu .animate, чтобы пульсировать цвет фона. Когда песня заканчивается, я очищаю интервал, но, конечно, фон песни остается последним цветом, установленным в интервале. Есть ли способ изменить цвет песни на основе правила CSS? В противном случае мне придется отслеживать предыдущую песню (которая, возможно, изменила положение и, следовательно, цвет) или настроить отдельные классы цвета фона и сбросить классы всех песен в списке воспроизведения каждый раз, когда кто-то добавляет, удаляет или перемещает песню. в плейлисте или песня заканчивается. Я бы предпочел использовать только CSS-подход.

Заранее спасибо, Dan

Answer 1

Вы определяете цвет фона по умолчанию с более низкой специфичностью и половину случаев с более высокой специфичностью. Тем не менее, вот два решения CSS:

Во-первых:

#playlist .playlist_item  { /* only here for compatibility with browsers that don't understand CSS3 selectors */
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(even) { 
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(odd) {
  background: #b3b3b3;
}

Первое и второе правила не могут быть объединены, если вы должны поддерживать старые браузеры, в противном случае вы можете стереть первое правило. Четное и нечетное покрытие каждого случая, поэтому это безопасно.

Второе:

#playlist .playlist_item  { /* compatibility reasons again */
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(n) { 
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(odd) {
  background: #b3b3b3;
}

Второе правило имеет тот же эффект, что и первое, за исключением более высокого приоритета. Это четвертый пример CSS3 селекторов - Структурные псевдоклассы

Answer 2

Альтернативой, которую я не вижу выше, является использование CSS3-анимации для вашей пульсации. Сделайте так, чтобы JS применил класс is-пульсирующий; пульсирующая анимация повторяется бесконечно, пока класс не будет удален; затем стиль элемента возвращается к своему обычному, не пульсирующему фону. Я сделал CodePen для иллюстрации: http://codepen.io/MisterGrumpyPants/pen/enGcC

В дополнение к простоте, это решение также будет работать лучше, чем анимация JS. Стоит попробовать.

Answer 3

Решение, которое я выбрал:
Я отслеживаю ранее проигранную песню, используя jQuery, т.е.:

currently_playing = $('#' + currElmId);

Это делается после отправки песни на флэш-память.

Ранее в сценарии (чтобы не мигать предыдущая песня) я просто сбрасываю css для соответствующих элементов, используя:

currently_playing.stop(true, false);
clearInterval(highlight);

Надеюсь, что это может помочь кому-то еще.

Answer 4

вот пример:

$('.playlist_item').click(
        function() {
             var $dv = $(this);
             $dv.data('oldBG', $dv.css('backgroundColor')); // save the original background color
            $dv.animate({backgroundColor: '#ff0000'}, 2000, function() {
                 $(this).css('backgroundColor', $(this).data('oldBG')); // once done, apply old background color
            });                 
       });

Пример выполнения

Если вы хотите получить целевой цвет фона, вы можете добавить класс CSS и элемент для этого:

.playlist_item_highlight { Дисплей: нет; фон: # FF0000; } и добавить этот документ, чтобы вы могли $('#playlist .playlist_item_hightlight').css('backgroundColor');

Answer 5

Я не уверен на 100% в этом, но анимация jQuery меняет атрибут стиля непосредственно на элементе, поэтому после очистки интервала, если вы сделали что-то вроде этого:

$(this).attr("style","");

Он должен очистить что-либо в атрибуте style и позволить свойству CSS пройти снова.

Answer 6

Установить атрибут стиля на ""

Например:

node.style.backgroundColor=""