: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>

上篇： :visited

下篇： :active