Как изменить цвет ссылки или элемента при наведении курсора

Серега - Понедельник, 17 Февраль 2014 08:55

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

И так решения по обновлению стиля сайта было принято, осталось только придумать, что конкретно я хочу изменить? Долго думать о том, что и как обновить на сайте мне не пришлось,  как то раз просматривая Гугл + я увидел очередную статью Виталия Бургамистрова (его сайт http://mojwp.ru/). В этой статье он рассказал как можно менять цвета элементов  при наведении мышки на них. Решение которое он предложил меня устроило, все было просто и понятно вот часть кода:

.licat:hover {background:#51AE3A;}
.licat:hover a {color:#fff;}

Таким образом при наведении курсора мышки на ссылку меняется цвет текста и цвет заднего фона. Это дополнение необходимо добавить в основной файл стилей вашего шаблона или темы (в основном это файл style.css но может иметь и другие названия). Лучше этот код добавить после основного стиля прописанного для ссылок. Но для корректной работы мне понадобилось переместить одну букву в нижней строк.

Вот как было Вот как стало
.licat:hover a {color:#fff;}
.licat a:hover {color:#fff;}

Пример кода:

a{color: #f15000;
	text-decoration: none;}
a:hover{text-decoration: none; color:#b80000;}
.licat:hover {background:#51AE3A;}
.licat a:hover {color:#fff;}

Затем для вывода ссылок мы используем html код в виде:

<div class="licat"><a href="http://www.sevelweb.ru/kak-sozdat-nadezhnyiy-parol/">Как создать надежный пароль?</a></div>
Вот пример его работы:

Но это было только начало, оказывается есть еще более интересное решения для смены цвета ссылки и фона при наведении мыши или курсора. Можно к этому коду добавить такой элемент как задержка смены фона, но при этом нужно еще будет добавить рамку и прописать дополнительный цвет фона ссылки без наведения курсора и естественно цвет фона при наведении курсора.

Вот пример того, что у вас может получиться:

Wordress исполнилось 10 лет
Браузер Google Chrome-27
Браузер Опера для Андроид
С новым Годом!!!

Согласитесь такая смена цвета ссылки и заднего фона при наведении курсора мышки, очень оригинальная и придает сайту некую уникальность. Мне такое решение очень нравиться, а точнее сам процесс смены цвета ссылки и заднего фона.

Для того, что бы это все работало нужно в файл стиля ваше темы (шаблона) прописать примерно такой код:

.linky {
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: background 1s ease;
}
.linky:hover {color:#fff !important; background:#51AE3A;}

Для вывода таких ссылок нужно использовать следующий код:

<a class="linky" href="http://www.sevelweb.ru/wordpress-ispolnilos-10-let/" target="_blank">Wordress исполнилось 10 лет</a>

Где обязательно нужно указать класс для вашей ссылке, в нашем случае это class= «linky».

Для корректной работы кода смены цвета ссылки и заднего фона с задержкой, возможно Вам придется его немного адаптировать под свою тему (шаблон). Но в целом это не сложно и все у Вас получиться!

Комментарии (5)

  1. CommentsВнутрипольные Конвекторы   |  Понедельник, 07 Июль 2014 at 13:06

    Обязательно применю на своём сайте

  2. CommentsСерега   |  Понедельник, 07 Июль 2014 at 23:10

    Обязательно примените, от того что, при наведении курсора на ссылку изменяется ее цвет и фон, да еще и плавно все это происходит, пользователю вашего сайта будет интересно проходить по таким ссылкам.

  3. CommentsTraveler   |  Среда, 03 Сентябрь 2014 at 23:16

    Все правильно сказано — уникальность придает и будет положительно влиять на поведенческие факторы. Люди видят, что ссылка меняет цвет и процент переходы выше. А если цвет не меняет, то у многих ощущение, что это не ссылка. А то, что и фон меняется, то это вообще здорово !

  4. CommentsСергей   |  Воскресенье, 02 Ноябрь 2014 at 14:51

    Спасибо Вам большое за грамотное разъяснение. Ваш совет относительно смены цвета ссылки и заднего фона при наведении курсора мышки очень мне помог. Возможно применение Вашего совета (консультации) очень удивит раздолбаев «программистов» — разработчиков, которые получают деньги за дизайн моего сайта. Ещё раз огромное Вам спасибо и низкий Вам поклон.

  5. CommentsСерега   |  Воскресенье, 09 Ноябрь 2014 at 18:09

    Сергей — рад что смог Вам помочь и статья пошла на пользу! ) Многие думают над тем как изменить цвет ссылки или элемента при наведении курсора, но мало кто знает оригинальное решение, да в добавок еще и простое! Я тоже когда то столкнулся с этим вопросом и нашел подходящее для себя решения смены текста ссылки и фона при наведении курсора, после чего решил написать эту статью.

Оставить комментарий






Подписаться

Рекомендую