使用css :hover选择器选择鼠标悬停在元素上时的样式

CSS :hover 选择器可以让我们设置鼠标悬停在元素上时的样式。它可以与任何元素一起使用，包括文本、图像、链接、按钮等。

使用方法

a:hover {
  color: red;
}

上面的代码将所有链接的文本颜色更改为红色，当鼠标悬停在链接上时。

我们可以使用:hover选择器来更改元素的背景颜色，字体样式，边框，图像，文本颜色等。

• 更改背景颜色：

  button:hover {
    background-color: #ff0000;
  }
  

• 更改字体样式：

  a:hover {
    font-style: italic;
  }
  

• 更改边框：

  div:hover {
    border: 1px solid #ff0000;
  }
  

• 更改图像：

  img:hover {
    content: url(img/image2.png);
  }
  

• 更改文本颜色：

  span:hover {
    color: #ff0000;
  }
  

使用:hover选择器，我们可以轻松地更改元素的样式，从而给用户更好的体验。