--- 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")}}