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(/images/star2.png) no-repeat}
p.stars:hover {width:100px; height:95px; background:#fff url(/images/star1.png) no-repeat}
</style>
</head>
<body>
<p class="stars"> </p>
</body>
</html>

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

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

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

    1. 14 Март 2011 в 4:33
      s212
      Ответить

      Отлично
      Пригодилось!!

      Если не сложно подскажите как сделать рамку для картинки onmouceover что ток не пробовал… никак(((

      здесь подсмотрел.. https://ab-w.net/CSS/image_opacity.php неплохо… только в место затенения картинки onmouseout – картинка а принаведении мыши некая рамка(тож изображение).. возможно такое??

    2. 14 Март 2011 в 15:22
      Вася Митин
      Ответить

      Зачем тебе лишние сложности? Сделай рамку на CSS, добавь атрибут border к описанию своего псевдокласса, то есть описуемого элемента с приставкой :hover и при наведении будет тебе рамка, поэкпрериментируй самостоятельно!

    3. 19 Август 2011 в 8:50
      Дмитрий
      Ответить

      Вот здесь: https://ab-w.net/CSS/CSS_text2.php
      определяются ссылки как:
      -в момент ее нажатия;
      -в момент наведения на нее курсора;
      -не посещенную;
      -уже посещенную.
      Я сделал:
      -a:active
      -a:hover
      -a:visited
      Но в браузерах Мозила и Хром не поддерживает, только в IE. Значит в других (кроме IE) не возможно?
      С уважением!

      • 19 Август 2011 в 19:23
        Вася Митин
        Ответить

        Это кроссбраузерный синтаксис. Работает в любых браузерах. Попробуйте обновить их версии. Смотрите дополнитеьно https://ab-w.net/CSS/css_links.php

    Ваше мнение