:hover | Псевдокласс CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник CSS3 » Псевдоклассы


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


:hover | Псевдокласс CSS

Псевдокласс :hover устанавливает стиль элементу при наведении на него курсора.




Псевдокласс :hover устанавливает стиль элементу при наведении на него курсора мышки.Что будет происходить с элементом на который будет наведён курсор мышки зависит только от Вашего воображения,но имеется в виду только наведение,а не нажатие.Существует строгий порядок установки подобных псевдоклассов для ссылок,придерживаться последовательности стоит только при условии наличия других псевдоклассов.Но это имеет отношение только к ссылкам,для остальных комбинаций соблюдение последовательности не актуально.
Порядок последовательности.
a:link {
Свойство ( а ).
}
a:visited {
Свойство ( а ).
}
a:hover {
Свойство ( а ).
}
a:focus {
Свойство ( а ).
}
a:active {
Свойство ( а ).
}
Псевдокласс применим ко всем элементам,создан в версии CSS2 и проходит валидацию согласно версии CSS3.




Псевдокласс работает в браузерах




Пример применения псевдокласса


<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдокласс :hover</title>
<style type="text/css">
<!--
div#color {
width:100px;
height:50px;
padding:10px;
background:black;
border:10px double red;
font-weight:bold;
color:white;
}
div#perehod {
width:100px;
height:50px;
padding:10px;
background:indigo;
border:10px double blue;
font-weight:bold;
color:white;
transition:width 5s 3s 1s;
-moz-transition:width 5s 3s 1s;
-webkit-transition:width 5s 3s 1s;
-o-transition:width 5s 3s 1s;
}
div#color:hover {
background:red;
border:10px double black;
}
div#perehod:hover {
width:300px;
}
-->
</style>
</head>
<body>
<div id="color">М Е Н Я Е М</div>
<br>
<div id="perehod">УДЛИННЯЕМ</div>
</body>
</html>

Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
Категория: Псевдоклассы | Добавил: IZOTOP (29.05.2012) | Автор: Меренков Михаил W
Просмотров: 1012 | Теги: css, ссылки, свойство, на ссылку, при наведении, style, :hover | Рейтинг: 5.0/1

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]