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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
---
title: ':hover'
slug: 'Web/CSS/:hover'
tags:
- CSS
- Псевдоклассы
- Руководство
translation_of: 'Web/CSS/:hover'
---
<p>{{ CSSRef() }}</p>
<h2 id="Описание">Описание</h2>
<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:hover</code> срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":visited") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:hover</code> до правил <code>:link</code> и <code>:visited</code>, но после <code>:active</code>, как определено в <em>LVHA-порядке</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
<p>Псевдокласс <code>:hover</code> может применяться к любому <a href="/ru/docs/Web/CSS/pseudo-elements" title="Pseudo-classes">псевдоэлементу</a>. {{experimental_inline}}</p>
<p>Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.</p>
<div class="note"><strong>Замечания по использованию</strong>: на сенсорных экранах <code>:hover</code> проблемный или не работает. В зависимости от браузера, псевдокласс <code>:hover</code> может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.</div>
<h2 id="Примеры">Примеры</h2>
<pre class="brush: css">:link:hover { outline: dotted red; }
.foo:hover { background: gold; }
</pre>
<h3 id="Выпадающее_меню">Выпадающее меню</h3>
<p>С псевдоклассом <code>:hover</code> вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать <strong>выпадающие меню на чистом CSS</strong> (только на CSS, без использования <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). Сущность этой техники - создание правил, типа следуюшего:</p>
<pre class="brush: css">div.menu-bar ul ul {
display: none;
}
div.menu-bar li:hover > ul {
display: block;
}
</pre>
<p>применим к HTML структуре типа следующей:</p>
<pre class="brush: 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>
</pre>
<p>Смотрите наш полный <a class="internal" href="/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">пример выпадающего меню, основанный на CSS</a>.</p>
<h3 id="Галерея_полноразмерных_изображений_и_превью">Галерея полноразмерных изображений и превью</h3>
<p>Вы можете использовать псевдокласс <code>:hover</code>, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>.</p>
<div class="note"><strong>Замечания:</strong> Для аналагичного эффекта, но основанного на псевдоклассе<a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> (применяется к скрытым радиокнопкам), смотрите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/Web/CSS/:checked" title="ru/CSS/:checked">ru/CSS/:checked</a>.</div>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td> </td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Может применяться к любым псевдоэлементам.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Без значительных изменений.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Изначальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>для <code><a></code> элементов</td>
<td>0.2</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>4.0</td>
<td>4.0</td>
<td>2.0.4 (419)<br>
<font size="2"><span style="line-height: 19.5px;">различные ошибки до этой версии</span></font></td>
</tr>
<tr>
<td>для всех элементов</td>
<td>0.2</td>
<td>{{ CompatGeckoDesktop(1.0) }}</td>
<td>7.0</td>
<td>7.0</td>
<td>2.0.4 (419)<br>
<font size="2"><span style="line-height: 19.5px;">различные ошибки до этой версии</span></font></td>
</tr>
<tr>
<td>для псевдоэлементов</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoDesktop(28) }}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<p>В IE8-11, наведя курсор на элемент, прокручивая вверх/вниз, без перемещения курсора, элемент останется в состоянии <code>:hover</code>, пока курсор не передвинут. Смотрите <a href="https://connect.microsoft.com/IE/feedbackdetail/view/926665">IE баг 926665</a>.</p>
<p>В IE9 (и возможно ранее), если у {{HTMLElement("table")}} есть родитель с {{cssxref("width")}}, установленной не в <code>auto</code> и {{cssxref("overflow-x")}}<code>: auto;</code>, а у {{HTMLElement("table")}} столько контента, что он переполняет родителя по горизонтали, а также есть {{cssxref(":hover")}} стили, установленные на элементы в таблице, то при наведении на указанные элементы будет увеличиваться высота {{HTMLElement("table")}}. <a href="http://jsbin.com/diwiqe">Вот живой пример, которой иллюстрирует этот баг.</a> Один из способов исправления, установление <code>min-height: 0%;</code> на родителя таблицы (должны быть указаны %, <code>0</code> и <code>0px</code> не работают). Баг подняли в <a href="http://bugs.jquery.com/ticket/10854">jQuery ticket #10854</a>, но его закрыли, так как это не ошибка jQuery.</p>
<p>На Safari Mobile for iOS 7.1.2, нажатие на <a href="/ru/docs/Web/Events/click#Safari_Mobile">кликабельный элемент</a> вызывает переход элемента в состояние <code>:hover</code>, и элемент остаётся в нём, пока другой элемент не войдёт в состояние <code>:hover</code>.</p>
<p>Смотрите также:</p>
<ul>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium баг #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium баг #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
</ul>
|
