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
|
---
title: ':hover'
slug: 'Web/CSS/:hover'
tags:
- CSS
- CSS 伪类
translation_of: 'Web/CSS/:hover'
---
<p>{{ CSSRef() }}</p>
<h2 id="概要">概要</h2>
<p><code>:hover</code> CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像{{ cssxref(":link") }}, {{ cssxref(":visited") }}, 和 {{ cssxref(":active") }}等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。</p>
<p>:hover伪类可以任何伪元素上使用。{{experimental_inline}}</p>
<p>用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标（鼠标指针）悬停在元素上时提供关联的样式。</p>
<div class="note"><strong>注意</strong>: 在触摸屏上 <code>:hover</code> 有问题，基本不可用。不同的浏览器上<code>:hover</code> 伪类表现不同。 可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。 触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。</div>
<h2 id="语法">语法</h2>
{{csssyntax}}
<h2 id="示例">示例</h2>
<pre class="brush: css">:link:hover { outline: dotted red; }
.foo:hover { background: gold; }
</pre>
<h3 id="下拉按钮">下拉按钮</h3>
<p><code>使用:hover</code> 伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯CSS的下拉按钮（不使用JavaScript）。 本质是创建如下的CSS：</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">Menu</a>
<ul>
<li>
<a href="example.html">Link</a>
</li>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</pre>
<p>在 <a class="internal" href="https://developer.mozilla.org/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> 看示例.</p>
<h3 id="可全图预览的画廊">可全图预览的画廊 </h3>
<p><code>:hover</code> 伪类可以让你实现一个当鼠标悬停在图片上时全图预览的画廊功能。 在 <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">this demo</a> 看示例。</p>
<div class="note"><strong>注意:</strong> 一个类似的效果，是基于 :checked伪类（用于隐藏单选框）实现的，看 <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">this demo</a>，源于 <a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked">En/CSS/:checked</a>。</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Can be applied to any pseudo-element.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>No significant change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("css.selectors.hover")}}
|
