css 的 hover属性详解

最新推荐文章于 2025-04-30 16:27:04 发布

东西资料

最新推荐文章于 2025-04-30 16:27:04 发布

阅读量7.7k

点赞数 7

文章标签： css html css3

本文链接：https://blog.csdn.net/xidongziliao/article/details/129806592

版权

CSS的hover属性用于在鼠标悬停时改变元素样式，可应用于任何元素。它需置于link和visited之后，active之前。在触摸屏上可能表现不一致，开发者应注意兼容性问题，避免依赖hover来展示重要内容。文中提供了多个使用hover属性改变背景色、显示隐藏元素及创建下拉菜单的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}