Стили CSS при наведении курсора

Мы с вами разобрали как изменить стили CSS меню. Теперь рассмотрим как изменить пункты меню при наведении на них курсора. Это даст нам более динамичный дизайн, без увеличения веса страницы и установки Flesh и Java. Не будем забывать, что устанавливая различные скрипты мы увеличиваем вес страницы и скорость её загрузки, что может сказаться на проблемах в ранжирования сайта поисковыми системами. Как добиться высоких позиций сайта в поисковиках читайте здесь. Так же возможны проблемы в отображении этих компонентов в мобильных версиях. Для проведения изменений пользуемся консолью для исследования элементов. Что это и как пользоваться я писал здесь.
 За отображение элемента при наведении отвечает такой раздел как - a:hover. В выбранном мной шаблоне Protostar этот раздел пуст. Соответственно никаких изменений, при наведении курсора на пункт меню, не происходит. Внося изменения, в этот раздел, мы зададим нужные нам свойства.


Шрифт. Мы можем оставить тот же шрифт, что и в меню или изменить его. Допустим, изменить его с monotype corsiva на impact. При наведении курсора, на пункт меню, мы будем видеть другой шрифт. Для этого вставим: font-family: impact;
Размер шрифта. Мы также можем изменить размер шрифта при наведении на пункт меню. Мы можем указать его в пикселях или процентах. Вносим такую запись: font-size: 110%;
Цвет шрифта. Так же изменим цвет шрифта. Для этого внесём такую строку: color: #D34322; Вы выбираете цвет сами.
 Давайте всё соберём вместе.
.nav > li > a:hover{
text-decoration: none;
font-size: 110%;
color: #D34322;
font-family: impact;
}
 Тестируем эти данные в консоли, вносим необходимые правки и вносим изменения в код сайта.