CSS псевдостили: Hover

01 Март 2011, рубрика: HTML и CSS зарисовки | Подготовил:

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

Для примера мне понадобятся два изображения (star1.png и star2.png).


Печатаем простенький код:

<html>
<head>
<style type="text/css">
p.stars {width:100px; height:95px; background:#fff url(http://blog.ab-w.net/images/star2.png) no-repeat}
p.stars:hover {width:100px; height:95px; background:#fff url(http://blog.ab-w.net/images/star1.png) no-repeat}
</style>
</head>
<body>
<p class="stars"> </p>
</body>
</html>

Наведите курсор на изображение:

Так можно изменять не только цвет, но и фон ссылок при наведении курсора.

4 комментариев

  1. 14 Март 2011 в 4:33
    s212
  2. 14 Март 2011 в 15:22
    Вася Митин
  3. 19 Август 2011 в 8:50
    Дмитрий
    • 19 Август 2011 в 19:23
      Вася Митин

Ваше мнение