Разделы

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

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

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

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

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

Пример 1. Изменение цвета рамки

<!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="figure.jpg" alt="Винни-Пух" width="100" height="111">
   </a>
   <a href="vinnie-the-pooh.html">
    <img src="figure.jpg" alt="Винни-Пух" width="100" height="111">
   </a>
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид рамки до и после наведения курсора на изображение

Гость, 12.10.2008

Спасибо! Для меня очень нужная информация!

Гость, 06.11.2008

Наконец то нашел на понятном языке. Спасибо

Гость, 16.12.2008

Спасибо!

Рут, 15.03.2009

В IE6 не работает!

Admin, 16.03.2009

Чтобы в IE работало, можно использовать не границу, а цвет фона. Соответственно, менять фон под рисунком с помощью псевдокласса hover.

<!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 {
background: #53da3f;
display: inline-block;
margin-right: 10px;
line-height: 1px;
}
A IMG {
padding: 3px;
border: none;
line-height: 1px;
}
A:hover { background: #f26522; }
</style>
</head>
<body>
<p>
<a href="vinnie-the-pooh.html"><img src="figure.jpg" alt="Винни-Пух" width="100" height="111"></a>
<a href="vinnie-the-pooh.html"><img src="figure.jpg" alt="Винни-Пух" width="100" height="111"></a>
</p>
</body>
</html>

Влад, 06.02.2010

Vlad, 16.03.2009
Отличная идея!!

Roman, 10.09.2010

Помогите пожалуйста. Где - то на сайте увидел квадратики с разными цветами. На какой цвет наведеш курсор мыши, такого цвета становится и весь фон страницы. Может кто знает, как ето можно сделать. Заранее благодарен, Роман.

Вадим, 10.09.2010

Может укто знает???

Admin, 06.10.2010

Средствами HTML и CSS сделать нельзя, только через Javascript. Если нужно - могу написать код

Разделы

Термины

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

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