Движение мыши: mouseover/out, mouseenter/leave
В этой главе мы более подробно рассмотрим события, возникающие при движении указателя мыши над элементами страницы.
События mouseover/mouseout, relatedTarget
Событие mouseover происходит в момент, когда курсор оказывается над элементом, а событие mouseout – в момент, когда курсор уходит с элемента.
Эти события являются особенными, потому что у них имеется свойство relatedTarget . Оно «дополняет» target . Когда мышь переходит с одного элемента на другой, то один из них будет target , а другой relatedTarget .
Для события mouseover :
- event.target – это элемент, на который курсор перешёл.
- event.relatedTarget – это элемент, с которого курсор ушёл ( relatedTarget → target ).
Для события mouseout наоборот:
- event.target – это элемент, с которого курсор ушёл.
- event.relatedTarget – это элемент, на который курсор перешёл ( target → relatedTarget ).
В примере ниже каждое лицо и его черты – отдельные элементы. При движении указателя по этим элементам в текстовом поле отображаются происходящие события.
Каждое из них содержит информацию о target и relatedTarget :
container.onmouseover = container.onmouseout = handler; function handler(event) < function str(el) < if (!el) return "null" return el.className || el.tagName; >log.value += event.type + ': ' + 'target=' + str(event.target) + ', relatedTarget=' + str(event.relatedTarget) + "\n"; log.scrollTop = log.scrollHeight; if (event.type == 'mouseover') < event.target.style.background = 'pink' >if (event.type == 'mouseout') < event.target.style.background = '' >>body, html < margin: 0; padding: 0; >#container < border: 1px solid brown; padding: 10px; width: 330px; margin-bottom: 5px; box-sizing: border-box; >#log < height: 120px; width: 350px; display: block; box-sizing: border-box; >[class^="smiley-"] < display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 20px; >.smiley-green < background: #a9db7a; border: 5px solid #92c563; position: relative; >.smiley-green .left-eye < width: 18%; height: 18%; background: #84b458; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; >.smiley-green .right-eye < width: 18%; height: 18%; border-radius: 50%; position: relative; background: #84b458; top: 29%; right: 22%; float: right; >.smiley-green .smile < position: absolute; top: 67%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; >.smiley-green .smile:after, .smiley-green .smile:before < content: ""; position: absolute; top: -50%; left: 0%; border-radius: 50%; background: #84b458; height: 100%; width: 97%; >.smiley-green .smile:after < background: #84b458; height: 80%; top: -40%; left: 0%; >.smiley-yellow < background: #eed16a; border: 5px solid #dbae51; position: relative; >.smiley-yellow .left-eye < width: 18%; height: 18%; background: #dba652; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; >.smiley-yellow .right-eye < width: 18%; height: 18%; border-radius: 50%; position: relative; background: #dba652; top: 29%; right: 22%; float: right; >.smiley-yellow .smile < position: absolute; top: 67%; left: 19%; width: 65%; height: 14%; background: #dba652; overflow: hidden; border-radius: 8px; >.smiley-red < background: #ee9295; border: 5px solid #e27378; position: relative; >.smiley-red .left-eye < width: 18%; height: 18%; background: #d96065; position: relative; top: 29%; left: 22%; border-radius: 50%; float: left; >.smiley-red .right-eye < width: 18%; height: 18%; border-radius: 50%; position: relative; background: #d96065; top: 29%; right: 22%; float: right; >.smiley-red .smile < position: absolute; top: 57%; left: 16.5%; width: 70%; height: 20%; overflow: hidden; >.smiley-red .smile:after, .smiley-red .smile:before < content: ""; position: absolute; top: 50%; left: 0%; border-radius: 50%; background: #d96065; height: 100%; width: 97%; >.smiley-red .smile:after
Свойство relatedTarget может быть null
Свойство relatedTarget может быть null .
Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.
Следует держать в уме такую возможность при использовании event.relatedTarget в своём коде. Если, например, написать event.relatedTarget.tagName , то при отсутствии event.relatedTarget будет ошибка.
Пропуск элементов
Событие mousemove происходит при движении мыши. Однако, это не означает, что указанное событие генерируется при прохождении каждого пикселя.
Браузер периодически проверяет позицию курсора и, заметив изменения, генерирует события mousemove .
Это означает, что если пользователь двигает мышкой очень быстро, то некоторые DOM-элементы могут быть пропущены:
Если курсор мыши передвинуть очень быстро с элемента #FROM на элемент #TO , как это показано выше, то лежащие между ними элементы (или некоторые из них) могут быть пропущены. Событие mouseout может запуститься на элементе #FROM и затем сразу же сгенерируется mouseover на элементе #TO .
Это хорошо с точки зрения производительности, потому что если промежуточных элементов много, вряд ли мы действительно хотим обрабатывать вход и выход для каждого.
С другой стороны, мы должны иметь в виду, что указатель мыши не «посещает» все элементы на своём пути. Он может и «прыгать».
В частности, возможно, что указатель запрыгнет в середину страницы из-за пределов окна браузера. В этом случае значение relatedTarget будет null , так как курсор пришёл «из ниоткуда»:
Вы можете проверить это «вживую» на тестовом стенде ниже.
В его HTML есть два элемента, вложен в . Если быстро провести мышью над ними, то событие может возникнуть только на внутреннем элементе или только на внешнем, а может вообще не сгенерироваться никаких событий.
Также попробуйте поставить курсор на внутренний элемент, а затем очень быстро сделайте движение мышкой вниз через внешний элемент. Если у вас получится достаточно быстро, то на родительском элементе не будет сгенерировано никаких событий. То есть, мышь пройдёт через внешний элемент, не замечая его.
let parent = document.getElementById('parent'); parent.onmouseover = parent.onmouseout = parent.onmousemove = handler; function handler(event) < let type = event.type; while (type.length < 11) type += ' '; log(type + " target=" + event.target.id) return false; >function clearText() < text.value = ""; lastMessage = ""; >let lastMessageTime = 0; let lastMessage = ""; let repeatCounter = 1; function log(message) < if (lastMessageTime == 0) lastMessageTime = new Date(); let time = new Date(); if (time - lastMessageTime >500) < message = '------------------------------\n' + message; >if (message === lastMessage) < repeatCounter++; if (repeatCounter == 2) < text.value = text.value.trim() + ' x 2\n'; >else < text.value = text.value.slice(0, text.value.lastIndexOf('x') + 1) + repeatCounter + "\n"; >> else < repeatCounter = 1; text.value += message + "\n"; >text.scrollTop = text.scrollHeight; lastMessageTime = time; lastMessage = message; >#parent < background: #99C0C3; width: 160px; height: 120px; position: relative; >#child < background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); >textarea
Если был mouseover , то будет и mouseout
Несмотря на то, что при быстрых переходах промежуточные элементы могут игнорироваться, в одном мы можем быть уверены: элемент может быть пропущен только целиком.
Если указатель «официально» зашёл на элемент, то есть было событие mouseover , то при выходе с него обязательно будет mouseout .
Событие mouseout при переходе на потомка
Важная особенность события mouseout – оно генерируется в том числе, когда указатель переходит с элемента на его потомка.
То есть, визуально указатель всё ещё на элементе, но мы получим mouseout !
Это выглядит странно, но легко объясняется.
По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени – над самым глубоко вложенным и верхним по z-index.
Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий.
Обратите внимание на важную деталь.
Событие mouseover , происходящее на потомке, всплывает. Поэтому если на родительском элементе есть такой обработчик, то оно его вызовет.
Вы можете наглядно увидеть это в примере ниже: находится внутри . На родителе определены обработчики событий mouseover/out , которые выводят информацию о них в текстовое поле.
При переходе мышью с внешнего элемента на внутренний, вы увидите сразу два события: mouseout [target: parent] (ушли с родителя) и mouseover [target: child] (перешли на потомка, событие всплыло).
function mouselog(event) < let d = new Date(); text.value += `$:$:$ | $ [target: $]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; >#parent < background: #99C0C3; width: 160px; height: 120px; position: relative; >#child < background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); >textarea
parent
При переходе с родителя элемента на потомка – на родителе сработают два обработчика: и mouseout и mouseover :
parent.onmouseout = function(event) < /* event.target: внешний элемент */ >; parent.onmouseover = function(event) < /* event.target: внутренний элемент (всплыло) */ >;
Если код внутри обработчиков не смотрит на target , то он подумает, что мышь ушла с элемента parent и вернулась на него обратно. Но это не так! Мышь никуда не уходила, она просто перешла на потомка.
Если при уходе с элемента что-то происходит, например, запускается анимация, то такая интерпретация происходящего может давать нежелательные побочные эффекты.
Чтобы этого избежать, можно смотреть на relatedTarget и, если мышь всё ещё внутри элемента, то игнорировать такие события.
Или же можно использовать другие события: mouseenter и mouseleave , которые мы сейчас изучим, с ними такая проблема не возникает.
События mouseenter и mouseleave
События mouseenter/mouseleave похожи на mouseover/mouseout . Они тоже генерируются, когда курсор мыши переходит на элемент или покидает его.
Но есть и пара важных отличий:
- Переходы внутри элемента, на его потомки и с них, не считаются.
- События mouseenter/mouseleave не всплывают.
События mouseenter/mouseleave предельно просты и понятны.
Когда указатель появляется над элементом – генерируется mouseenter , причём не имеет значения, где именно указатель: на самом элементе или на его потомке.
Событие mouseleave происходит, когда курсор покидает элемент.
Вот тот же пример, что и выше, но на этот раз на верхнем элементе стоят обработчики mouseenter/mouseleave вместо mouseover/mouseout .
Как вы сами можете увидеть, генерируются только события, связанные с движением курсора относительно верхнего . Ничего не произойдёт при переходе на внутренний и обратно. Переходы на потомки игнорируются.
function mouselog(event) < let d = new Date(); text.value += `$:$:$ | $ [target: $]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; >
#parent < background: #99C0C3; width: 160px; height: 120px; position: relative; >#child < background: #FFDE99; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); >textarea
parent
Делегирование событий
События mouseenter/leave просты и легки в использовании. Но они не всплывают. Таким образом, мы не можем их делегировать.
Представьте ситуацию, когда мы хотим обрабатывать события, сгенерированные при движении курсора по ячейкам таблицы. И в таблице сотни ячеек.
Что ж, не проблема – будем использовать mouseover/mouseout .
Начнём с простых обработчиков, которые выделяют текущий элемент под указателем мыши:
// выделим элемент под мышью table.onmouseover = function(event) < let target = event.target; target.style.background = 'pink'; >; table.onmouseout = function(event) < let target = event.target; target.style.background = ''; >;
Вот они в действии. При переходе между элементами этой таблицы, текущий будет подсвечен:
table.onmouseover = function(event) < let target = event.target; target.style.background = 'pink'; text.value += "mouseover " + target.tagName + "\n"; text.scrollTop = text.scrollHeight; >; table.onmouseout = function(event) < let target = event.target; target.style.background = ''; text.value += "mouseout " + target.tagName + "\n"; text.scrollTop = text.scrollHeight; >;
#text < display: block; height: 100px; width: 456px; >#table th < text-align: center; font-weight: bold; >#table td < width: 150px; white-space: nowrap; text-align: center; vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; cursor: pointer; >#table .nw < background: #999; >#table .n < background: #03f; color: #fff; >#table .ne < background: #ff6; >#table .w < background: #ff0; >#table .c < background: #60c; color: #fff; >#table .e < background: #09f; color: #fff; >#table .sw < background: #963; color: #fff; >#table .s < background: #f60; color: #fff; >#table .se < background: #0c3; color: #fff; >#table .highlight
Квадрат Bagua: Направление, Элемент, Цвет, Значение Металл
Серебро
Старейшины Вода
Синий
Перемены Земля
Жёлтый
Направление Металл
Золото
Молодость Всё
Пурпурный
Гармония Дерево
Синий
Будущее Земля
Коричневый
Спокойствие Огонь
Оранжевый
Слава Дерево
Зеленый
Роман
Можно достичь этого так:
Вот пример кода, учитывающего все ситуации:
// ячейка под курсором в данный момент (если есть) let currentElem = null; table.onmouseover = function(event) < // перед тем, как войти на следующий элемент, курсор всегда покидает предыдущий // если currentElem есть, то мы ещё не ушли с предыдущего , // это переход внутри - игнорируем такое событие if (currentElem) return; let target = event.target.closest('td'); // переход не на - игнорировать if (!target) return; // переход на , но вне нашей таблицы (возможно при вложенных таблицах) // игнорировать if (!table.contains(target)) return; // ура, мы зашли на новый currentElem = target; target.style.background = 'pink'; >; table.onmouseout = function(event) < // если мы вне , то игнорируем уход мыши // это какой-то переход внутри таблицы, но вне , // например с на другой if (!currentElem) return; // мы покидаем элемент – но куда? Возможно, на потомка? let relatedTarget = event.relatedTarget; while (relatedTarget) < // поднимаемся по дереву элементов и проверяем – внутри ли мы currentElem или нет // если да, то это переход внутри элемента – игнорируем if (relatedTarget == currentElem) return; relatedTarget = relatedTarget.parentNode; >// мы действительно покинули элемент currentElem.style.background = ''; currentElem = null; >;
Полный пример со всеми деталями:
// ячейка под курсором в данный момент (если есть) let currentElem = null; table.onmouseover = function(event) < // перед тем, как войти на следующий элемент, курсор всегда покидает предыдущий // если currentElem есть, то мы ещё не ушли с предыдущего , // это переход внутри - игнорируем такое событие if (currentElem) return; let target = event.target.closest('td'); // переход не на - игнорировать if (!target) return; // переход на , но вне нашей таблицы (возможно при вложенных таблицах) // игнорировать if (!table.contains(target)) return; // ура, мы зашли на новый currentElem = target; target.style.background = 'pink'; >; table.onmouseout = function(event) < // если мы вне , то игнорируем уход мыши // это какой-то переход внутри таблицы, но вне , // например с на другой if (!currentElem) return; // мы покидаем элемент – но куда? Возможно, на потомка? let relatedTarget = event.relatedTarget; while (relatedTarget) < // поднимаемся по дереву элементов и проверяем – внутри ли мы currentElem или нет // если да, то это переход внутри элемента – игнорируем if (relatedTarget == currentElem) return; relatedTarget = relatedTarget.parentNode; >// мы действительно покинули элемент currentElem.style.background = ''; currentElem = null; >;
#text < display: block; height: 100px; width: 456px; >#table th < text-align: center; font-weight: bold; >#table td < width: 150px; white-space: nowrap; text-align: center; vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; cursor: pointer; >#table .nw < background: #999; >#table .n < background: #03f; color: #fff; >#table .ne < background: #ff6; >#table .w < background: #ff0; >#table .c < background: #60c; color: #fff; >#table .e < background: #09f; color: #fff; >#table .sw < background: #963; color: #fff; >#table .s < background: #f60; color: #fff; >#table .se < background: #0c3; color: #fff; >#table .highlight
Квадрат Bagua: Направление, Элемент, Цвет, Значение Металл
Серебро
Старейшины Вода
Синий
Перемены Земля
Жёлтый
Направление Металл
Золото
Молодость Всё
Пурпурный
Гармония Дерево
Синий
Будущее Земля
Коричневый
Спокойствие Огонь
Оранжевый
Слава Дерево
Зеленый
Роман
Итого
Мы рассмотрели события mouseover , mouseout , mousemove , mouseenter и mouseleave .
Особенности, на которые стоит обратить внимание:
- При быстром движении мыши события не будут возникать на промежуточных элементах.
- События mouseover/out и mouseenter/leave имеют дополнительное свойство: relatedTarget . Оно дополняет свойство target и содержит ссылку на элемент, с/на который мы переходим.
События mouseover/out возникают, даже когда происходит переход с родительского элемента на потомка. С точки зрения браузера, курсор мыши может быть только над одним элементом в любой момент времени – над самым глубоко вложенным.
События mouseenter/leave в этом отличаются. Они генерируются, когда курсор переходит на элемент в целом или уходит с него. Также они не всплывают.
Задачи
Улучшенная подсказка
важность: 5
Напишите JavaScript код, который показывает подсказку над элементом с атрибутом data-tooltip . Значение атрибута должно становиться текстом подсказки.
Это похоже на задачу Поведение «подсказка», но здесь элементы с подсказками могут быть вложены друг в друга. Показываться должна подсказка на самом глубоко вложенном элементе.
Только одна подсказка может быть показана в любой момент времени.
:hover
CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link , :visited и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :hover после правил :link и :visited до :active , как определено LVHA-порядком: :link — :visited — :hover — :active .
Псевдокласс :hover может применяться к любому псевдоэлементу. Экспериментальная возможность
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
Примечание: на сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.
Примеры
:link:hover outline: dotted red; > .foo:hover background: gold; >
Выпадающее меню
С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следующего:
div.menu-bar ul ul display: none; > div.menu-bar li:hover > ul display: block; >
применим к HTML структуре типа следующей:
div class="menu-bar"> ul> li> a href="example.html">Менюa> ul> li> a href="example.html">Ссылкаa> li> li> a class="menu-nav" href="example.html">Подменюa> ul> li> a class="menu-nav" href="example.html">Подменюa> ul> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> ul> li> li>a href="example.html">Ссылкаa>li> ul> li> ul> li> ul> div>
Галерея полноразмерных изображений и превью
Вы можете использовать псевдокласс :hover , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.
Примечание: Для аналогичного эффекта, но основанного на псевдоклассе :checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.
Спецификации
Specification
HTML Standard
# selector-hover
Selectors Level 4
# the-hover-pseudo
Поддержка браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
:hover¶
Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.
Демо¶
Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link , :visited и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited , но после :active , как определено в LVHA-порядке: :link — :visited — :hover — :active .
Псевдокласс :hover может применяться к любому псевдоэлементу.
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
Замечания по использованию
На сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.
Псевдоклассы
Синтаксис¶
1 2 3 4
/* Selects any element when "hovered" */ a:hover color: orange; >
Спецификации¶
- WHATWG HTML Living Standard
- Selectors Level 4
- Selectors Level 3
- CSS Level 2 (Revision 1)
Описание и примеры¶
Пример 1. Выпадающее меню¶
С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:
1 2 3 4 5 6 7
div.menu-bar ul ul display: none; > div.menu-bar li:hover > ul display: block; >
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
div class="menu-bar"> ul> li> a href="example.html">Менюa> ul> li> a href="example.html">Ссылкаa> li> li> a class="menu-nav" href="example.html" >Подменюa > ul> li> a class="menu-nav" href="example.html" >Подменюa > ul> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> ul> li> li>a href="example.html">Ссылкаa>li> ul> li> ul> li> ul> div>
Смотрите полный пример выпадающего меню, основанный на CSS.
Пример 2. Галерея полноразмерных изображений и превью¶
Вы можете использовать псевдокласс :hover , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.
Пример 3¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
html> head> meta charset="utf-8" /> title>hovertitle> style> a:link color: #0000d0; /* Цвет ссылок */ padding: 2px; /* Поля вокруг текста */ > a:hover background: #786b59; /* Цвет фона под ссылкой */ color: #ffe; /* Цвет ссылки */ > style> head> body> p>a href="1.html">Ссылка 1a>p> p>a href="2.html">Ссылка 2a>p> p>a href="3.html">Ссылка 3a>p> body> html>
В данном примере псевдокласс :hover применяется к ссылке (тегу ), при этом меняется цвет ссылки и фона под ней. Результат:
Пример 4¶
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
html> head> meta charset="utf-8" /> title>hovertitle> style> 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 class="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>
Псевдокласс :hover
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
Синтаксис
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
hover Ссылка 1
Ссылка 2
Ссылка 3
Рис. 1. Результат использования псевдокласса :hover для ссылок
HTML5 CSS2.1 IE Cr Op Sa Fx
Рис. 2. Использование :hover для создания меню
Браузеры
В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.
CSS по теме