CSS如何设置鼠标悬停效果

在 CSS 中，可以使用 :hover 伪类来设置鼠标悬停效果。该伪类允许您在用户将鼠标悬停在一个元素上时应用样式。

以下是一个设置鼠标悬停效果的示例代码：

a {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

在上面的代码中，a 元素的默认颜色为黑色，没有下划线。当用户将鼠标悬停在链接上时，链接的颜色将变为红色，并且下划线将出现。

除了上述属性外，还可以使用其他属性来控制鼠标悬停效果，例如：

• background-color：指定背景颜色。
• border：指定边框样式。
• box-shadow：指定阴影效果。
• transform：指定元素的变换效果。

例如，以下代码将一个元素的背景颜色设置为淡蓝色，并添加了一个阴影效果：

div {
  background-color: #87CEFA;
  box-shadow: 0px 0px 5px #000000;
}

div:hover {
  background-color: #1E90FF;
  box-shadow: 0px 0px 10px #000000;
}

请注意，不同浏览器可能对某些鼠标悬停效果的支持有所不同。因此，您应该在不同浏览器中测试您的样式，并根据需要进行调整。