Можно ли иметь разные цвета внутри div, используя переменную php?

0

Итак... это моя проблема:

Я составил список ссылок, используя php-цикл.

То, что я хочу сделать дальше, состоит в том, чтобы покрасить каждого из них, но с другим цветом, когда он завис над мышью. (красный и лайм)

Эти цвета будут уложены внутри файла.txt (я уже понял, что часть).

Я уже нашел способ сделать это, но он создавал новый div каждый раз, когда цикл выполнялся и делал это, было такое пространство между div, которые мне не нравятся.

a {
  color:white;
  -o-transition:color .3s ease-out;
  -ms-transition:color .3s ease-out;
  -moz-transition:color .3s ease-out;
  -webkit-transition:color .3s ease-out;
  transition:color .3s ease-out;
  text-decoration: none;

}
a:hover { color:cyan; }

Это мой код css для обычного наведения (в случае отсутствия ни красного, ни лайма для этой ссылки)

Я пытаюсь сказать "код", который цвет применяется с помощью переменных php (уже фигурировал в этой части).

Мой вопрос: возможно ли, например, "подклассы" классу? Я имею в виду, чтобы иметь возможность сделать "подкласс" для извести и один для красного, имея все в ОДНОМ div и применяя их по переменным php.

РЕШИТЬ! Большое вам спасибо за вашу помощь и жаль, что я не мог быть более точным при написании этого.

  • 0
    Вы говорите, что 3 цвета будут использоваться один за другим и снова? если это так, используйте nth-child (3n), nth-child (3n-1) для двух других цветов
  • 0
    Не могли бы вы предоставить HTML, как вы строите div?
Теги:
colors

2 ответа

0
Лучший ответ

Вы можете использовать несколько классов для подклассов класса CSS.

Но в вашем случае вы можете просто добавить только один класс link-lime/link-red, например <a class="link-lime"... или <a class="link-red"... вместе с CSS-правилами a.link-lime:hover { color:lime } a.link-red:hover { color:red }

  • 3
    Пожалуйста, избегайте только ссылок.
  • 0
    Спасибо, сэр! Работал как шарм!
1

Если нужно использовать 3 цвета и менять их каждый раз, nth-child - ваш друг: DEMO

a:hover {
  background:cyan;
}
li:nth-child(3n) a:hover {
  background:red;
}
li:nth-child(3n-1) a:hover {
  background:lime;
}
Сообщество Overcoder
Наверх
Меню