Необычное применение CSS
Идея описана на сайте всем известного Эрика Мейера
.
Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом.
Замечание: Эффект rollover элементарно реализуется с помощью JavaScript. Например , как сделать прелодер и сам rollover. Код вообще хороший, но достаточно большой.
Для начала создаем обычную ссылку, скажем, вот такую
<a href="index.php">новости</a>
Затем берем картинку, которая должна показываться при неведении мышкой на ссылку, заключаем ее в теги <span></span> и помещаем всю эту конструкцию внутрь ссылки. Получается вот так:
<a href="index.php"> <span><img src="/i/css/button.gif" border="0" alt=""/> </span>новости</a>
Сейчас самое интересное. На элемент a и на элемент span, вложенный в a, пишем такие стили:
a {
display: inline}
a span {
display: none}
a:hover span {
display: inline;
position: absolute;
left: 400px}
a:hover {
color: #F90
border: 0px;}
Фактически получается вот что. В обычном состоянии содержимое элемента span внутри ссылки не отображается, что реализуется с помощью строчки
a span {
display: none}
При наведении же, значение свойства display изменяется на inline и содержимое элемента span позиционируется в нужное место (в нашем примере на 100 пикселей левее ссылки)
a:hover span {
display: inline;
position: absolute;
left: 400px}
Вот собственно и все!