css实现鼠标悬停显示

在网页设计中，鼠标悬停效果是非常常见的一种特效。这种效果可以让页面看起来更加生动，也可以用来实现一些功能。那么，如何使用CSS来实现鼠标悬停效果呢？

/* 普通状态下的样式 */
.hover-Box {
  background-color: gray;
  color: white;
}

/* 鼠标悬停状态下的样式 */
.hover-Box:hover {
  background-color: black;
  color: yellow;
}

以上是一个简单的例子。我们首先定义了一个类名为“hover-Box”的样式，表示普通状态下的样式。在这个例子中，我们将背景色设置为灰色，字体颜色设置为白色。

接着，在样式表中，我们使用了“:hover”伪类，表示鼠标悬停状态下的样式。在这个例子中，我们将背景色设置为黑色，字体颜色设置为黄色。

当鼠标悬停在“hover-Box”元素上时，就会触发“:hover”伪类，从而改变元素的样式。这样，我们就成功地实现了鼠标悬停效果。

需要注意的是，CSS的“:hover”伪类只能应用于可交互的元素，如链接、按钮等。对于普通的文本、图片等元素，无法使用“:hover”来实现鼠标悬停效果。