:hover

定义和用法

:hover，鼠标移到链接上时。最常见的例子是将鼠标指针移动到超链接的边界内
:hover，是一个伪类，它适用于处于悬停状态的元素。
:hover，可用于所有元素，不仅是链接。
:link选择器设置了未访问过的页面链接样式。:visited选择器设置访问过的页面链接的样式。:active选择器设置当你点击链接时的样式。
为了产生预期的效果，在 CSS 定义中，:hover必须位于:link和:visited之后！

语法:

E:hover

设置元素在其鼠标悬停时的样式。

如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问。这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。超链接状态顺序:：:link、:visited、:hover、:active。注意，:hover必须位于:link和:visited之后，:active必须位于:hover之后

注意:在触摸屏上:hover有问题，基本不可用。不同的浏览器上:hover伪类表现不同。可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

浏览器支持


所有浏览器都支持

例子

:link:hover { outline: dotted red; }
.foo:hover { background: gold; }

下拉按钮

使用:hover伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯CSS的下拉按钮（不使用JavaScript）。本质是创建如下的CSS：

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">menu</a>
		 <ul>
			 <li>
			 <a href="example">link</a>
			 </li>
			 <li>
				 <a class="menu-nav" href="example">submenu</a>
				 <ul>
					 <li>
						<a class="menu-nav" href="example">submenu</a>
						<ul>
							 <li><a href="example">link</a></li>
							 <li><a href="example">link</a></li>
							 <li><a href="example">link</a></li>
							 <li><a href="example">link</a></li>
						</ul>
					 </li>
					 <li><a href="example">link</a></li>
				 </ul>
			 </li>
		 </ul>
	 </li>
 </ul>
</div>