Информационные технологииStfw.Ru 🔍

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

🕛 19.01.2009, 18:49
За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс hover. Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.

A { стиль обычной ссылки }
A:hover { стиль ссылки при наведении на нее курсора }

Также псевдокласс hover допускается применять аналогичным способом к изображениям, но в браузере Internet Explorer версии 6 и ниже этот подход работать не будет. Все потому, что эта версия Internet Explorer понимает hover только для ссылок. Поэтому рассмотрим только универсальный метод, работающий во всех браузерах.

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Цвет рамки</title> <style type="text/css"> A IMG { border: 3px solid #53da3f; /* Рамка вокруг изображения-ссылки */ } A:hover IMG { border: 3px solid #f26522; /* Рамка при наведении на рисунок курсора мыши */ } </style> </head> <body> <p> <a href="vinnie-the-pooh.html"> <img src="images/figure.jpg" alt="Винни-Пух" width="100" height="111"> </a> <a href="vinnie-the-pooh.html"> <img src="images/figure.jpg" alt="Винни-Пух" width="100" height="111"> </a> </p> </body>
</html>

Все рецепты HTML и CSS   Теги:

Читать IT-новости в Telegram
Информационные технологии
Мы в соцсетях ✉