Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Эффект наведения для изображений в CSS.

Эффекты наведения для изображений работают на том же принципе, что и в предыдущих примерах, только для состояния наведения меняется значение background-image. В примере через таблицу стилей фоновое изображение (../fon/065.gif) применяется ко всем ссылкам документа. Указывается, что элемент а должен отображаться как блок, чтобы к нему можно было применить значения ширины и высоты (соответствующие размерам изображения). Правило а:hover указывает другое фоновое изображение (../fon/064.gif), отображающееся при наведении на ссылку курсора мыши.

Изменение стиля при получении " фокуса" при создании сайта.

Пользователи, которые путешествуют по Интернету используя только клавиатуру, применяют для перехода от ссылки к ссылке не мышь, а нажатие клавиши Tab. Когда ссылка активируется так, говорят, что она получила фокус (то же относится и к элементам управления формы, активированным и готовым к вводу данных пользователем). Селектор псевдокласса :focus позволяет авторам применить стиль к ссылке (или элементу формы), когда она получает фокус. Дополнительная визуальная индикация помогает обеспечивать доступность для пользователей, применяющих только клавиатуру.

При указании стилей для состояния получения фокуса селекторы псевдоклассов должны располагаться в таблице стилей в следующем порядке:

                             :link
                             :visited
                             :focus
                             :hover
                             :active

В Internet Explorer (версий 6 и ниже для Windows) не поддерживает селектор :focus, поэтому пользователи таких браузеров данного эффекта не увидят. Вместо этого селектора можно использовать селектор :active.

                         а { 
                              display: block; 
                                   /* позволяет указать ширину и высоту */
                              width: 150рх; 
                              height: ЗОрх;
                              background: url(../fon/065.gif) no-repeat #999; 
                              color: #FFF;
                                  /* центрирование текста по горизонтали и вертикали*/
                              text-align: center; 
                              text-decoration: none; 
                              line-height: ЗОрх; 
                              vertical-align: middle;
                               }
                               
                          a:hover {
                              background: url(../fon/064.gif) no-repeat #EEE; 
                              color: #333;
                              	}

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

                      < li id="ff">< a href="#">пока так< /ax/li>
                      < li id="dd">< a href="#">потом иначе< /ax/li>
                      a {
                         display: block;
                          width: 150px;	
                          height: ЗОрх;
                        }
                        
                      #ff a { 
                           background url(../fon/065.gif) no-repeat #999;	
                            }
                      #ff a:hover {
                            background url(../fon/064.gif) no-repeat #999;	
                            }
                      #dd a {
                            background url(../fon/067.gif) no-repeat #EEE;
                             }
                      #dd a:hover {
                            background url(../fon/068.gif) no-repeat  #999;
                               }

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: