Приднестровская поддержка XOOPS
Можно создать привлекательный эффект изменения цвета или иных параметров ссылки при наведении на нее указателя мыши. Его можно с успехом использовать в созданных на основе CSS панелях навигации; он применим и по отношению к ссылкам в тексте.
Решение
Для создания описанного эффекта необходимо воспользоваться динамическими псевдоклассами якоря :hover и :active.
Рассмотрим следующий пример. Ниже представлено типичное правило стиля, в котором описания всех псевдоклассов якоря одинаковы:
a:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
Если мы применим данное правило, ссылки будут отображаться синим цветом (#6A5ACD) с подчеркиванием, как на рис. 2.7.
Рис.2.7. Использование одинакового описания для всех псевдоклассов ссылок
Для выполнения поставленной задачи нам нужно удалить селекторы псевдоклассов :hover и :active из общего описания и задать каждому из них свое собственное описание. В приведенном ниже CSS-коде к нижнему подчеркиванию добавлено еще и верхнее. Кроме того, в нем задан фоновый цвет и более темный цвет для текста ссылки. На рис. 2.8. показан результат обработки данного кода браузером:
a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}
Как вы уже наверняка догадались, остальным псевдоклассам также можно задавать отдельные описания. В частности, вы можете захотеть использовать специальное оформление для посещенных ссылок. Для этого нужно составить отдельное описание для псевдокласса :visited.
Рис. 2.8. Наведение указателя мыши на ссылку, для которой указан специальный стиль при данном событии
При определении стиля для псевдоклассов избегайте изменения размера или начертания шрифта. В противном случае пользователь будет наблюдать постоянное дрожание страницы, ведь окружающий контент будет отодвигаться, чтобы освободить место для отображения более крупного текста при наведении на него указателя мыши.
Отправитель | Нити |
---|
2 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 2 далее... |