css 的 hover属性详解

css 的 hover 属性是一种伪类选择器，它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式 。hover 属性可以应用于任何元素，不仅仅是链接 。使用 hover 属性时，需要注意以下几点：

• hover 属性必须放在 link 和 visited 属性之后，但在 active 属性之前，以便生效 。这是因为 css 的优先级是按照 LVHA（link-visited-hover-active）的顺序来确定的 。
• 在 IE浏览器中，除了 a 元素之外，其他元素要使用 hover 属性，必须声明 <!DOCTYPE>
• 在触摸屏上，hover 属性有问题，基本不可用。不同的浏览器对 hover 伪类的表现不同。可能从不会触发，或者在触摸某元素后触发了一小会儿，或者总是触发即使用户不在触摸了，直到用户触摸别的元素。因此，网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

hover 属性的语法如下：

:hover {
  /* css 声明 */
}

下面是一些使用 hover 属性的示例：

• 当鼠标悬停在链接上时，改变链接的背景色：

a:hover {
  background-color: yellow;
}

• 当鼠标悬停在 p、h1 和 a 元素上时，改变它们的背景色：

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

• 为未访问、已访问、悬停和激活的链接设置不同的样式：

/* 未访问的链接 */
a:link {
  color: green;
}

/* 已访问的链接 */
a:visited {
  color: green;
}

/* 悬停的链接 */
a:hover {
  color: red;
}

/* 激活的链接 */
a:active {
  color: yellow;
}

• 为不同的链接设置不同的样式：

a.ex1:hover, a.ex1:active {
  color: red;
}

a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

• 当鼠标悬停在 span 元素上时，显示一个 div 元素（类似于工具提示）：

div {
  display: none;
}

span:hover + div {
  display: block;
}

• 当鼠标悬停在一个菜单项上时，显示一个下拉菜单：

ul {
  display: inline;
  margin: 0;
  padding: 0;
}

ul li {
 display: inline-block;
}

ul li:hover {
 background: #555;
}

ul li:hover ul {
 display: block;
}

ul li ul {
 position: absolute;
 width: 200px;
 display: none;
}

ul li ul li {
 background: #555;
 display: block;
}

ul li ul li a {
 display:block !important;
}

ul li ul li:hover {
 background: #666;
}