Одно наложение изображения, чтобы иметь несколько цветов в зависимости от категории сообщения в WordPress

Question

Я использую WordPress для создания веб-сайта портфолио. В настоящее время я показываю рекомендованное изображение своего поста в главном блоге и при наведении / наведении на него цветного наложения, которое меняется в зависимости от категории, в которой находится пост. В настоящее время я делаю это, используя прозрачное изображение размером 1x1px как background url () в моем CSS, изменяя его размер до размера изображения.

Я хотел бы, чтобы при переключении цвета все цвета категорий отображались в виде полос, если сообщение относится к нескольким категориям. Например, если мои категории и цвета следующие ...

Печать Работа - Зеленый

Веб - красный

Движущееся изображение - фиолетовый

... и у меня есть сообщение, которое переходит в «Работа печати» и «Сеть», состояние наведения должно быть наполовину зеленым и наполовину красным над изображением. Если сообщение относится ко всем трем категориям, состояние наведения должно быть в трех цветах (3 полосы - 1 зеленая, 1 красная и 1 фиолетовая рядом друг с другом).

Я не нашел никакой подсказки о том, возможно ли это в моих поисках, и не знаю, с чего начать. Это вообще достижимо, и если да, то с использованием только CSS или Jquery?

Answer 1

Вы можете сделать это, установив наложение контейнера div, давайте назовем его .hover_div. Этот div будет содержать любые / все цветные div для категорий - давайте назовем их .color_div. Заставьте категории для каждого поста создать еще один .color_div внутри .hover_div с помощью цикла foreach.

Используя Jquery, установите ширину для этих элементов в процентах:

var colors = $(".color_div").length;
var color_width = 100/colors;
$(".color_div").width(color_width + "%");

Это приведет к созданию одинаковых по размеру цветных элементов div в контейнере .hover_div. Дайте каждому из color_divs другое имя класса для каждого и установите цвет.

Вы должны быть готовы.