css3 hover效果

锅盖哒2023-10-13 19:55

CSS3中的:hover伪类用于创建鼠标悬停时的样式效果。当用户将鼠标悬停在页面元素上时，你可以为这些元素定义不同的样式规则，以实现交互效果

/* 一般样式规则 */
element {
  /* 正常状态下的样式 */
}

/* 悬停样式规则 */
element:hover {
  /* 鼠标悬停时的样式 */
}

如何使用:hover伪类为链接添加悬停效果：

/* 正常状态下的链接样式 */
a {
  color: blue; /* 链接文字颜色为蓝色 */
  text-decoration: none; /* 去掉下划线 */
}

/* 鼠标悬停时的链接样式 */
a:hover {
  color: red; /* 悬停时链接文字颜色为红色 */
  text-decoration: underline; /* 添加下划线 */
}

当鼠标悬停在链接上时，链接的文字颜色将从蓝色变为红色，并且会出现下划线。

你可以使用:hover伪类来创建各种交互效果，如按钮悬停效果、导航菜单效果等。根据需要，你可以自定义:hover下的任何样式属性，以满足你的设计需求。