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

Leave a Comment / Css / By /

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+

Задача

Изменить цвет текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.

Решение

Псевдокласс :hover, который добавляется к селектору A, определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A, потом :hover (пример 1).

Пример 1. Изменение вида ссылки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет ссылок</title>
  <style>
   a {
    color: #008000; /* Цвет обычной ссылки */ 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:visited {
    color: #800080; /* Цвет посещённой ссылки */
   } 
   a:hover {
    color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline; /* Добавляем подчеркивание */
   }
  </style>
 </head>
 <body>
  <p><a href="rome.html">Cras ingens iterabimus aequor</a> —
  завтра снова мы выйдем в огромное море.</p>
 </body>
</html>

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited. Это имеет значение, иначе посещённые ссылки в данном случае не будут изменять свой цвет.

Рис. 1. Вид ссылки при наведении на неё курсора мыши

Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover, как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон под ссылками</title>
  <style>
   a {
    color: #000080; /* Цвет обычной ссылки */
    padding: 2px; /* Поля вокруг текста */
   }
   a:visited {
    color: #800080; /* Цвет посещенной ссылки */
   } 
   a:hover {
    text-decoration: none; /* Убираем подчеркивание */
    color: #fff; /* Цвет ссылки при наведении на нее курсора мыши */  
    background: #e24486; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="rome.html">Audaces fortuna juvat</a> - 
     счастье покровительствует смелым.</p>
 </body>
</html>

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Рис. 2. Изменение цвета фона ссылки

Меняем цвет элемента по наведению мышки. Простой пример, простой CSS

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

Делается данная «штука» при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Обновлено 17.01.2019

Давайте сразу для наглядности пример, чтобы поняли о чем речь. Проведите мышкой по пунктам меню:

Как только мышка оказывается наведена на любое поле в списке — происходит смена заднего фона строки, а так же цвет текста/ссылки в названии рубрики сайта.

Вот так выглядит код данного блока:

<div> <a href=»https://mojwp.ru/category/birzi-ssylok»>Биржи ссылок</a> <a href=»https://mojwp.ru/category/plugins»>Все плагины WordPress</a> <a href=»https://mojwp.ru/category/poleznoe»>Всякие полезности</a> <a href=»https://mojwp.ru/category/ukrashenie»>Украшаем сайт</a> <a href=»https://mojwp.ru/category/hak»>Хаки WordPress</a> </div>

<div>

<a href=»https://mojwp.ru/category/birzi-ssylok»>Биржи ссылок</a>

<a href=»https://mojwp.ru/category/plugins»>Все плагины WordPress</a>

<a href=»https://mojwp.ru/category/poleznoe»>Всякие полезности</a>

<a href=»https://mojwp.ru/category/ukrashenie»>Украшаем сайт</a>

<a href=»https://mojwp.ru/category/hak»>Хаки WordPress</a>

</div>

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер <div>, <li> и прочие подходящие теги.

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный <div>тут ссылки<div>. У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

.catside a:hover {background: #0078BF; color: #fff;}

.catside a:hover {background: #0078BF; color: #fff;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама «штука», позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс hover (о нем можно почитать ЗДЕСЬ).

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside. Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

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

Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.

Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться консолью разработчика F12 в вашем браузере (как им пользоваться смотрите видео на моем канале YOUTUBE).

Меняем цвет элемента по наведению мышки

4.5 (90.59%)
Проголосовало: 17

Давай, оцени статью!

Курсоры | htmlbook.ru

Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.

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

Синтаксис создания курсора очень прост. Следует определить класс и в нем использовать один из типов курсора, описанных в таблице. Ниже в примере 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=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
   .movelink { cursor: move; }
   .helplink { cursor: help; }
  </style>
 </head>
 <body>
  <p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
  <p><a href="new.html">СПРАВКА</a></p>
 </body>
</html>

Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).

Пример 2. Изменение вида курсора для всей веб-страницы

<!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=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
    body { cursor: ne-resize; }
  </style>
 </head> 
 <body>
   <p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
   <p><a href="new.html">СПРАВКА</a></p>
  </body>
</html>

Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги <div> или <span>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <span>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).

Пример 3. Курсор для разных областей веб-страницы

<!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=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head> 
 <body>
   <p>На этом тексте курсор мыши примет вид перекрестья.</p>
   <p><a href="1.html">СПРАВКА 1</a></p>
   <p><a href="2.html">СПРАВКА 2</a></p>
   <p><a href="3.html">СПРАВКА 3</a></p>
  </body>
</html>

Изменение курсора при наведении мыши

Вы здесь: Главная — CSS — CSS Основы — Изменение курсора при наведении мыши

Изменение курсора при наведении мыши

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

Для задания вида курсора используется свойство cursor. Фактически, всё, что нужно это добавить в CSS-стиль это свойство для тех элементов, у которых Вы хотите менять курсор при наведении мыши.

img {
  cursor: pointer;
}

Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:

<img src = 'myimage.jpg' alt = 'Моё изображение' style = 'cursor: pointer;'/>

Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: «cursor : url(«my.cur»), default;«. То есть нужно, используя url() указать путь к изображению курсора.

Вот таким простым образом изменяется вид курсора при наведении мыши, и безо всяких скриптов, что очень хорошо.

  • Изменение курсора при наведении мыши
    Создано 21.06.2011 16:59:30
  • Изменение курсора при наведении мыши Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

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

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

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

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

Эта статья поможет вам управлять оригинальным стилем на курсоре на CSS, что в какой-то мере может улучшить взаимодействие с пользователем.

Мы рассмотрим следующие способы управления удобством использования курсора:

1. Создание курсора рукой, когда пользователь наводит на списки или элемент под ссылкой;
2. Полное изменение курсора, который или при наведении на ключевые слова или ссылки;
3. Как создать пользовательский эффект картинки курсора на элементе;
4. Пример всех типов курсоров;

Создать стандартный курсор, когда пользователь наводит на элемент списка ии перехода. Стиль будет выглядеть так, если вы хотите установить указатель пальца:

CSS

Код

li {
cursor: pointer;
}


Теперь давайте посмотрим на пример для иллюстрации метода, упомянутого выше:

Решили кардинально поменять или изменить вид указателя мыши, то здесь нужно изменить стилистику под основу курсора для вашего элемента списка li — где стиль только идет под заданный элемента.

Ваш код будет выглядеть так, если вы хотите установить указатель пальца:

Код

<!DOCTYPE html>
<html>
  <head>
  <title>Наименование документа</title>
  <style>
  li{
  margin-bottom:15px;
  }
  li.kysogden {
  cursor: pointer;
  }
  li:hover {
  background-color: #ccc;
  }
  </style>
  </head>
  <body>
  <h5>Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель:</h5>
  <ul>
  <li>Элемент списка 1 с курсором по умолчанию.</li>
  <li>Элемент списка 2 с указателем курсора.</li>
  <li>Еще один элемент списка с курсором мыши по умолчанию.</li>
  </ul>
  </body>
</html>


Здесь добавили класс kysogden и появился стандарт, что на demo странице можно посмотреть.

Демонстрация

Рассмотрим еще один неординарный пример, где задействуем изображение, которое в виде изображения, где под каждое наведении идет свой вид, что не будет повториться.

Теперь есть возможность задействовать знаки ресурса, где предоставляется код, но главное есть значение URL-адреса. Где самостоятельно загружаем значок на свой сайт с последствием вывода URL-адрес под визуальный просмотр курсора при наведении.

Код

<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  <style>
  body {
  width: 600px;
  margin: 0.5em auto;
  }
  img {
  width: 280px;
  height: 186px;
  margin: 5px;
  display: inline-block;
  background-position: 50% 50%;
  }
  .dog {  
  cursor: url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-1.png»), auto;
  }
  .cactus {  
  cursor: url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-2.png»), auto;
  }
  .nature {  
  cursor: url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-3.png»), auto;  
  }
  .house {
  cursor:
  url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-4.png»), auto;
  }
  </style>
  </head>
  <body>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-1.png» alt=»cactus»>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-2.png» alt=»nature»>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-3.png» alt=»dog»>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-4.png» alt=»house»>
  </body>
</html>


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

Демонстрация

Настроить курсоры как можно заметить не сильно сложно, как изначально может показаться. Где при правильном использовании можно создать красивый и реально уникальный вид при наведении, сто в большинстве все зависит от тематической группы, где находится сайт.

Примеры всех типов курсоров

HTML

Код

<div>
  <div>auto</div>
  <div>default</div>
  <div>none</div>
  <div>context-menu</div>
  <div>help</div>
  <div>pointer</div>
  <div>progress</div>
  <div>wait</div>
  <div>cell</div>
  <div>crosshair</div>
  <div>text</div>
  <div>vertical-text</div>
  <div>alias</div>
  <div>copy</div>
  <div>move</div>
  <div>no-drop</div>
  <div>not-allowed</div>
  <div>all-scroll</div>
  <div>col-resize</div>
  <div>row-resize</div>
  <div>n-resize</div>
  <div>s-resize</div>
  <div>e-resize</div>
  <div>w-resize</div>
  <div>ns-resize</div>
  <div>ew-resize</div>
  <div>ne-resize</div>
  <div>nw-resize</div>
  <div>se-resize</div>
  <div>sw-resize</div>
  <div>nesw-resize</div>
  <div>nwse-resize</div>
  <div>grab</div>
  <div>grabbing</div>
  <div>zoom-in</div>
  <div>zoom-out</div>
  </div>


CSS

Код

body {
  text-align: center;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  }
  .cursor {
  display: flex;
  flex-wrap: wrap;
  }
  .cursor > div {
  flex: 120px;
  padding: 10px 2px;
  white-space: nowrap;
  border: 1px solid #666;
  border-radius: 5px;
  margin: 0 5px 5px 0;
  }
  .cursor > div:hover {
  background: #1c87c9;
  }
  .auto { cursor: auto; }
  .default { cursor: default; }
  .none { cursor: none; }
  .context-menu { cursor: context-menu; }
  .help { cursor: help; }
  .pointer { cursor: pointer; }
  .progress { cursor: progress; }
  .wait { cursor: wait; }
  .cell { cursor: cell; }
  .crosshair { cursor: crosshair; }
  .text { cursor: text; }
  .vertical-text { cursor: vertical-text; }
  .alias { cursor: alias; }
  .copy { cursor: copy; }
  .move { cursor: move; }
  .no-drop { cursor: no-drop; }
  .not-allowed { cursor: not-allowed; }
  .all-scroll { cursor: all-scroll; }
  .col-resize { cursor: col-resize; }
  .row-resize { cursor: row-resize; }
  .n-resize { cursor: n-resize; }
  .e-resize { cursor: e-resize; }
  .s-resize { cursor: s-resize; }
  .w-resize { cursor: w-resize; }
  .ns-resize { cursor: ns-resize; }
  .ew-resize { cursor: ew-resize; }
  .ne-resize { cursor: ne-resize; }
  .nw-resize { cursor: nw-resize; }
  .se-resize { cursor: se-resize; }
  .sw-resize { cursor: sw-resize; }
  .nesw-resize { cursor: nesw-resize; }
  .nwse-resize { cursor: nwse-resize; }
  .grab { cursor: -webkit-grab; cursor: grab; }
  .grabbing { cursor: -webkit-grabbing; cursor: grabbing; }
  .zoom-in { cursor: -webkit-zoom-in; cursor: zoom-in; }
  .zoom-out { cursor: -webkit-zoom-out; cursor: zoom-out; }


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

Демонстрация

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

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A. Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет ссылок</title>
  <style>
   a {
    color: #0075B2; /* Цвет обычной ссылки */ 
    text-decoration: none; /* Убираем подчёркивание у ссылок */
   }
   a:visited {
    color: #8F8E8E; /* Цвет посещённой ссылки */
   } 
   a:hover {
    color: #CE242B; /* Цвет ссылки при наведении */ 
    text-decoration: underline; /* Добавляем подчёркивание */
   }
  </style>
 </head>
 <body>
  <p><a href="#">Cras ingens iterabimus aequor</a> —
   завтра снова мы выйдем в огромное море.</p>
 </body>
</html>

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited. Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Вид ссылки при наведении

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover, как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон под ссылками</title>
  <style>
   a {
    color: #000080; /* Цвет обычной ссылки */
    padding: 2px; /* Поля вокруг текста */
   }
   a:hover {
    text-decoration: none; /* Убираем подчёркивание */
    color: #FFFAC0; /* Цвет ссылки */ 
    background: #AB4A9C; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="#">Audaces fortuna juvat</a> - 
   счастье покровительствует смелым.</p>
 </body>
</html>

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Изменение цвета фона ссылки

Рис. 2. Изменение цвета фона ссылки

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 28.09.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Как заменить изображение при наведении на него курсора? CSS

Многие из Вас ещё, независимо от знаний вёрстки и программирования, сталкивались с
заменой изображения при наведении на него. Самый частый пример — наведение курсора мыши на кнопку. В результате картинка менялась, возможно даже в размерах и форме. В данной статье я покажу как можно заменить изображение, изменить его размер при наведении на него, используя только CSS.
На будущее, рекомендую использовать именно такой метод, так как пользуясь средствами JS Вы рискуете попасть на пользователя, у которого он отключен в настройках браузера, в результате чего человек может не увидеть каких-либо деталей или не понять смысла задумки.

Что будем использовать? Нам достаточно псевдоэлемента hover и свойства background. Из файлов это сам html файл и изображение.

В реализации всё просто. Код состоит из двух частей:

1. html с нужным div

Код HTML

<div class="img"></div>

2. свойства css для div

Код CSS

.img {

  background: url("image001.jpg") no-repeat; /* изображение по умолчанию */

  height: 120px; /* высота изображения */

  width: 120px; /* ширина изображения */

}

.img:hover {

  background: url("image002.jpg") no-repeat; /* новое изображение */

  border: 2px solid #f00; // Устанавливаем красную рамку

  height: 120px; /* высота изображения */

  width: 120px; /* ширина изображения */

}

Теперь предлагаю рассмотреть занимательный и простой пример работы кода. При желании можно скачать и разобрать принцип работы у себя на компьютере.Демонстрация Скачать исходники
Как вы видите на примере, изображение, указанное по умолчанию (то есть image001), появляется при загрузке страницы, а image002 только при наведении курсора на первое изображение.
Внимание! Нужно обязательно указывать ширину и высоту блока, в противном случае div просто не отобразится. Также будьте внимательны с указанием точных размеров блока, так как изображение внутри не будет масштабировано, так как оно считается фоновым. Если размеры блока будут меньше, то и видна будет только часть изображения.

Чаще всего используется именно такой способ смены изображения. Если хотите заменить изображение в других случаях, например, при клике, то использовать надо уже не hover, а active.

Да, существуют и другие способы заменить изображение: JS, библиотека jQuery, CSS3, но о них я напишу в статьях в соответствующих разделах.

Спасибо за внимание!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *