Серверное время 2018-04-26 01:04:40
Приветствую вас, Гость
Понравился сайт - нажми CTRL+D и добавь в закладки..
Свойства CSS
CSS по категориям
Статистика
Яндекс.Метрика
Реклама
Реклама

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

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Частичная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Применяется Не определено
Ссылка на спецификацию открыть в новой вкладке
Описание
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
Синтаксис
элемент:hover { ... }
Аргументы
Нет.
Пример 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>hover</title>
<style type="text/css">
a:link {
color: #0000d0; /* Цвет ссылок */
padding: 2px; /* Поля вокруг текста */
}
a:hover {
background: #786b59; /* Цвет фона под ссылкой */
color: #ffe; /* Цвет ссылки */
}
</style>
</head>
<body>
 <p><a href="1.html">Ссылка 1</a></p>
 <p><a href="2.html">Ссылка 2</a></p>
 <p><a href="3.html">Ссылка 3</a></p>
</body>
</html>

Демонстрация примера 1
В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней.
Пример 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>hover</title>
<style type="text/css">
UL {
width: 180px; /* Ширина меню */
list-style: none; /* Для списка убираем маркеры */
margin: 0; /* Нет отступов вокруг */
padding: 0; /* Убираем поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
font-size: 10pt; /* Размер названий в пункте меню */
}
LI UL {
position: absolute; /* Подменю позиционируются абсолютно */
display: none; /* Скрываем подменю */
margin-left: 165px; /* Сдвигаем подменю вправо */
margin-top: -2em; /* Сдвигаем подменю вверх */
}
LI A {
display: block; /* Ссылка как блочный элемент */
padding: 5px; /* Поля вокруг надписи */
text-decoration: none; /* Подчеркивание у ссылок убираем */
color: #666; /* Цвет текста */
border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
background-color: #f0f0f0; /* Цвет фона */
border-bottom: none; /* Границу снизу не проводим */
}
LI A:hover {
color: #ffe; /* Цвет текста активного пункта */
background-color: #5488af; /* Цвет фона активного пункта */
}
LI:hover UL {
display: block; /* При выделении пункта курсором мыши отображается подменю */
}
.brd {
border-bottom: 1px solid #ccc; /* Линия снизу */
}
</style>
</head>
<body>
 <ul id="menu">
  <li><a href="russian.html">Русская кухня</a>
   <ul>
    <li><a href="linkr1.html">Бефстроганов</a></li>
    <li><a href="linkr2.html">Гусь с яблоками</a></li>
    <li><a href="linkr3.html">Крупеник новгородский</a></li>
    <li><a href="linkr4.html" class="brd">Раки по-русски</a></li>
   </ul>
  </li>
  <li><a href="ukrainian.html">Украинская кухня</a>
   <ul>
    <li><a href="linku1.html">Вареники</a></li>
    <li><a href="linku2.html">Жаркое по-харьковски</a></li>
    <li><a href="linku3.html">Капустняк черниговский</a></li>
    <li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li>
   </ul>
  </li>
  <li><a href="caucasus.html">Кавказская кухня</a>
   <ul>
    <li><a href="linkc1.html">Суп-харчо</a></li>
    <li><a href="linkc2.html">Лилибдж</a></li>
    <li><a href="linkc3.html">Чихиртма</a></li>
    <li><a href="linkc4.html" class="brd">Шашлык</a></li>
   </ul>
  </li>
  <li><a href="asia.html" class="brd">Кухня Средней Азии</a></li>
 </ul>
</body>
</html>

Демонстрация примера 2
В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню.
Примечание
В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (0)
Имя
Email
Осталось 65535 символов
© 2006-2012, Home-test.biz