Міняємо колір елемента з наведення мишки
Номер статті: 168
Робиться ця "штука" за допомогою стилів CSS, тобто доведеться додати кілька рядків тексту в файл стилів шаблону, а так само проявити свої дизайнерські здібності. Я підкажу що саме додати.
Давайте відразу для наочності приклад, щоб зрозуміли про що мова. Проведіть мишкою по пунктам меню:
Як тільки мишка виявляється наведена на будь-яке поле в списку - відбувається зміна заднього фону рядка, а так же колір шрифту / посилання в назві рубрики сайту.
Ось так виглядає код даного блоку:
До слова: я спеціально зробив побудова рубрик в сайдбарі вручну, тому що тепер з'явилася можливість прибрати непотрібні і виставити їх в довільному порядку. Робиться це через звичайний віджет Текст.
У моєму прикладі бачимо:
Тепер необхідно задати дію з наведення мишки. Як вже говорилося вище - робимо все за допомогою стилів CSS (файл шаблону може називатися style.css, css.css, core.css або ще якось).
Даною рядком ми вказали браузеру міняти колір заднього фону при наведенні мишки на зелений (# 51AE3A). Сама "штука", що дозволяє зрозуміти браузеру, що це потрібно робити з наведення мишки - псевдоклас hover (про нього можна почитати ТУТ).
Трохи зрозуміліше: був клас одиниці елемента licat. Для нього ми додали псевдоклас hover і оформили за правилами CSS (додали точку на початку і двокрапка між ними).
Тепер потрібно зробити так, щоб при наведенні змінювався і колір посилання, тому що при зміні заднього фону стандартний колір тексту може зливатися. Для цього так само додаємо в файл стилів другий рядок:
Тут практично така ж рядок, тільки ми додали правило конкретно для посилання - додали букву a. яка позначає тег посилання в HTML. Для неї прописали color: #fff ;. що означає зміну кольору тексту на білий (#fff).
А тепер два рядки разом, щоб бачити повний обсяг роботи:
Післямова
У даній статті я показав як працює зміна кольору елементів на самому звичайному прикладі. Якщо хочете розвиватися далі, то почитайте профільну літературу і довідники по CSS.
Використовувати hover можна, практично, для всіх елементів на сайті: блоки, текст, посилання. Проявіть трохи фантазії і зрозумієте як влаштовано у вас на сайті подібне. Після цього зможете його прикрасити або змінити частково оформлення.
Надаю послуги по створенню та налагодженню сайтів на WordPress (верстка, натяжка).
Віддячити Z888279575784 R109400923968 або ЯД 41001651742138
Мої контакти. Я в Twitter @mojWP. Дивись на Youtube. Новомосковський RSS блогу.
Дякую за цікаве рішення! Звичайно довелося допрацювати код під свій шаблон, в результаті у мене колір тексту посилання змінюється трохи по іншому ось код:
.link border: 1px solid # c4c4c4;
font-size: 14px;
font-family: georgia, times, verdana;
border-radius: 3px;
padding: 0 5px 2px 5px; color: # f15000; background: #EFEFEF;
-webkit-transition: background 1s ease;
-moz-transition-delay: 1s ease;
>
.link: hover
але мазило затримку все одно не показує, хоча я і прпісал їй умову -moz-transition-delay: 1s ease ;.
Може підкажіть вірне рішення для роботи затримки в Мозіль, багато що випробував нічого не допомогло, а у вас працює. Підкажіть рішення ?!
WP-R.ru Магазин WordPress
Преміальні плагіни і шаблони для CMS WordPress. Прокачай свій сайт. WMSN.ru Рідер RSS-стрічок
Стеж за виходом нових статей на популярних блогах вебмастер / SEO в одному місці.
Як просувати рубрику WordPress - інструкція та практичні поради щодо оптимізації. Для Вебстудіо і розробників - кілька корисних хаков для популяризації вашого бренду. Вся правда про хостинг Beget - мій відгук на його роботу і функціонал виходячи з досвіду. Як заробляти на download-трафив - ділюся своїм багаторічним досвідом і даю підказки.
Мої безкоштовні плагіни
Я використовую і раджу
SEO плагін WordPress
Рекомендую для максимальної настройки свого сайту під SEO-вимоги.
Мій надійний хостинг, перевірений за роки роботи. Рекомендую.