Фокусы с гиперссылками
- 29 марта 2014
Что можно делать с помощью только CSS без использования сценариев JavaScript и пр.
Секрет достаточно прост. Псевдокласс :hover позволяет управлять параметрами элементов, содержащихся в теге a, А он может содержать разные элементы, например изображение или текст.
Значит при наведении курсора на ссылку, содержащую определенный элемент, мы можем изменять цвет текста (color), видимость элемента (visibility: hidden|visible), управлять выводом элементов (display: none|block|inline|...), цветом фона, адресом фонового рисунка (background: цвет url(имя файла)) и т.п.
Этот элемент мы можем позиционировать абсолютно (position:absolute)! Он тут же выпадет из общего потока и прилипнет к верхнему левому углу ближайшего позиционированного родительского блока.
Остается лишь поместить элементы в нужную область содержащего позиционированного блока с помощью свойств left, top, right и bottom (более того, мы можем вынести элемент за пределы родительского блока, присвоив соответствующему из перечисленных свойств отрицательное значение), при необходимости, задав размеры, отступы и прочие параметры.
Вот и все. Создается визуальная иллюзия самостоятельности элемента.
Не забываем, что наш "независимый элемент" остается частью ссылки и при наведении на него курсора (если не отменен вывод) происходит то же, что и при наведении на ссылку. Это можно считать минусом рассмотренного метода. Немного смягчить столь явную связь ссылки с удаленным объектом можно, присвоив свойству cursor:default. По крайней мере, при наведении курсора на объект он будет выглядеть как обычный указатель.