Вторник, 12 Марта 2013 13:31

Псевдокласс :active

Written by 
Оцени эту запись
(1 Голос)

Псевдокласс :active используется для оформления ссылки (тег a) в активном состоянии, то есть при нажатии.

 

 

 

Состояние :active действует на ссылку только в момент нажатия на нее - при клике мыши или нажатии кнопки Enter при фокусе на нужной ссылке. Как только пользователь "отпускает" нажатую кнопку мыши или клавишу, состояние :active пропадает и пользователь переходит по ссылке на другую страницу. Состояние :active действует на ссылку при нажатии и левой, и правой кнопки мышки.

 

Пример:

 

<a href="http://kate-land.net" class="my_active_link">Kate-land.net</a>

 

CSS:

.my_active_link {

color: red;

}

.my_active_link:hover {

color: pink;

}

.my_active_link:active {

color: orange;

}

 

Результат (нажмите на ссылку):

 

Kate-land.net

 

Поскольку ссылке можно задать фоновую картинку, то ее также можно и изменить при наведении:

 

 

.my_active_link2 {
background: url(intel.png);
width: 100px;
height: 60px;
display: block;
}
.my_active_link2:active {
background: url(intel_active.png);
}
 
 
 
Результат (нажмите на ссылку):

 

 

 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов