Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?

На этом уроке мы научимся изменять цвет рамки вокруг изображения при наведении на него курсора мыши.

1. Открываем блокнот:
   
2. Псевдокласс hover отвечает за изменение стиля элемента при наведении на него указателя мыши. Для управления стилем ссылок этот псевдокласс добавляется к селектору A.
   Если тег <img> поместить внутрь контейнера <a>,то изображение превращается в ссылку ,при этом вокруг картинок автоматически добавляется рамка, показывающая что перед нами ссылка. Вид таких рамок управляется с помощью стилевого свойства border добавляемого к конструкции a img. Параметры рамки при наведении на рисунок курсора задаются конструкцией a:hover img.

   Добавляем данные с картинки:
   
   

3. Сохраняем наш файл:
   

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