PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Разного цвета для реализации hover
Klinch
Отправлено: 15 Октября, 2016 - 16:19:49
Post Id


Частый гость


Покинул форум
Сообщений всего: 214
Дата рег-ции: Июль 2012  


Помог: 0 раз(а)




Здравствуйте!

Есть сайт на Wordpress с плагином Woocommerce. Верстаю дизайн для него. В дизайне присутствует меню навигации слева, где расположены категории товаров. При наведении на некоторые категории - выпадает выдающее меню, где расположены подкатегории этой категории.

Для красоты используются миниатюры категорий. Наглядно видно на данном скриншоте:

Нажмите для увеличения


На пункте "Насосы циркуляционные" стоит курсор - фон миниатюры становится оранжевым, а само изображение должны становится белым. В этом и кроется моя проблема - я не знаю, как это реализовать. Woocommerce поддерживает загрузку только одной миниатюры для каждой категории, т.е. я могу загрузить либо миниатюру с серым изображением, либо с чёрным.

Пробовал использовать SVG - ничего хорошего не вышло... Не понимаю, как его правильно вставить. У меня есть такая ссылка на SVG: http://domain[dot]ru/wp-content/i-ta[dot][dot][dot]lee/kartinka[dot]svg - если вставить её с помощью <img> или background - возможности менять её цвет у меня не будет, т.е. нужно вставить именно сам XML код SVG. Как это сделать правильно? Я пробовал вставлять через php функцию include - почему-то ничего не вышло... Как будто-бы php не может открыть SVG файл.

Также пробовал в одном PNG файле объединять обе картинки - серую и белую. Ставить их рядом с друг другом, чтобы затем можно было с помощью background-position просто менять их местами. Однако, возникает проблема. В меню эти картинки должны иметь один размер - 45x45 пикселей. Но также они используются и внутри сайта, где их размер составляет, к примеру, 250x250 пикселей. Чтобы трюк c background-position удался, на сколько мне известно, картинка обязательно должна соответствовать нужному размеру. В итоге, я загружаю картинку размером 250х250 - она сохраняется под таким размером. Пытаюсь использовать её в меню - она слишком большая, уменьшаю её с помощью background-size до 45 пикселей. Но она уменьшается полностью, т.е. в итоге в меню у меня отображается сразу 2 картинки - и серая, и белая. А нужно, чтобы отображалась только одна и при наведении менялся background-position.


Подскажите, пожалуйста, как мне это правильно будет реализовать?
Надеюсь, я всё понятно объяснил. Если нет, попытаюсь объяснить по-другому. Просто весь день уже над этим колдую, мозг уже вскипел и не варит особо...

Буду очень благодарен за помощь!


--------------------------------------------------------------------
(Добавление)
Тьфу!
Сразу как написал - пришла гениальная идея.
Раз картинка размером 45х45 px должна отображаться, а в склееном виде её размеры 90x45 px, то я указал в background-size: 90px 45px; - всё заработало Голливудская улыбка

(Отредактировано автором: 15 Октября, 2016 - 16:30:12)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« CMS и фреймворки »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB