Четыре идеи задать стиль для ссылок, на которые наведена мышка

Ссылки – основная часть интернета. Ссылки, в действительности, соединяют контент, так почему бы не сделать соединение забавным? Псевдокласс :hover определяет стиль ссылки при наведении на нее курсора мыши, но при этом ссылка еще не активирована. Обычно ссылки подчеркиваются или выделяются каким-либо эффектным цветом. Однако существует много других способов выделить и указать пользователю на ссылку, некоторые из этих способов приведены ниже.

Свойство transition (переход)

CSS3 ввел устрашающее новое свойство - «transition» (переход). Старые браузеры, ну и новые в лице IE, проигнорируют это свойство и задействуют обычные поддерживаемые ими свойства. Вы можете с помощью свойства transition заставить вашу ссылку менять цвет очень медленно, ну или быстро, как угодно. Это очень тонкий, но привлекательный эффект.

Наведя мышку на ссылку, которая указана ниже, вы сможете в полной мере ощутить transion (переход). Данный эффект можно увидеть, к сожалению, пока только в браузере OPERA. Код, я думаю, узнать труда не составит.

Пример: Наведите мышку.

Еще один способ задать стиль ссылки:

CSS

  a:hover {
  color:#000;
  -webkit-transition:color 500ms ease-in;
  -moz-transition:color 500ms ease-in;
  -o-transition:color 500ms ease-in;
  transition:color 500ms ease-in;
}

Свойство shadow (тень)

Еще одно нововведение CSS3. При помощи свойства text-shadow к тексту добавляется тень. Цвет к тени следует задавать аккуратно, например, если вы сделаете акцент на тени и не уделите немного внимания выбору цвета фона и цвета букв, в старых браузерах возможны коллизии.

Пример: Наведите мышку.

CSS

a:hover {
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}

Перемещение

Этот эффект очень просто претворить в жизнь, к тому же очень многим нравится его использовать. Если применить перемещение, может создаться в некотором роде эффект интерактивности.

CSS

 a:hover {
    position: relative; top: 2px;
 }

Пример: Наведите мышку.

Opacity (непрозрачность)

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

CSS

  a.img {opacity: .5;}

Пример: