[分享]css两个元素的hover

CSS中的:hover是一个在鼠标悬停在一个元素上时触发的伪类，它可以用来改变元素的样式。这个伪类非常常用，因为它可以让我们在不使用JavaScript的情况下添加交互效果。接下来，我们将看到如何在C...

CSS中的:hover是一个在鼠标悬停在一个元素上时触发的伪类，它可以用来改变元素的样式。这个伪类非常常用，因为它可以让我们在不使用JavaScript的情况下添加交互效果。接下来，我们将看到如何在CSS中使用:hover来改变两个元素的样式。

/* 第一个元素 */
.element1 {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

/* 当鼠标悬停在第一个元素上时 */
.element1:hover {
  background-color: white;
  color: blue;
  border: 2px solid blue;
}

/* 第二个元素 */
.element2 {
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

/* 当鼠标悬停在第二个元素上时 */
.element2:hover {
  background-color: white;
  color: red;
  border: 2px solid red;
} 

在上面的代码中，我们定义了两个元素，分别用类名element1和element2来命名。这些元素都有一个背景颜色、文字颜色、内边距和圆角边框。接着，我们使用:hover伪类来改变这些元素的样式。当鼠标悬停在第一个元素上时，它的背景颜色会从蓝色变成白色，文字颜色从白色变成蓝色，并且在周围添加2像素宽的蓝色边框。同样地，当鼠标悬停在第二个元素上时，它的背景颜色会从红色变成白色，文字颜色从白色变成红色，并且在周围添加2像素宽的红色边框。

总之，如果你想在你的网站中添加一些交互效果，:hover伪类是一个非常有用的工具。只需为你想改变样式的元素定义一个:hover状态下的样式，就可以为你的用户提供更好的体验。