CSS 在 Chrome 开发者工具中查看 :hover 状态

在本文中，我们将介绍如何在 Chrome 开发者工具中查看 CSS 中的 :hover 状态。CSS 中的 :hover 伪类经常用于在用户将鼠标悬停在元素上时改变元素的样式。通过使用 Chrome 开发者工具，我们可以轻松地查看元素在 :hover 状态下的样式，以便进行调试和优化。

阅读更多：CSS 教程

使用 Chrome 开发者工具查看 :hover 状态的步骤

下面是在 Chrome 开发者工具中查看 :hover 状态的步骤：

打开 Chrome 浏览器，并打开你想要调试的网页。
在网页上右键单击，选择“检查”选项，打开 Chrome 开发者工具。你也可以通过按下键盘上的 Ctrl+Shift+I（Windows）或 Command+Option+I（Mac）来快速打开开发者工具。
在开发者工具窗口中，点击鼠标图标（光标）按钮，激活“选择元素”模式。
将鼠标悬停在你想要查看 :hover 状态的元素上，同时按住 Shift 键。你会看到该元素在 :hover 状态下的样式在 Styles 面板中被突出显示。
如果你想要查看其他 CSS 伪类的样式，例如 :active 或 :focus，通过按住 Shift 键的同时单击元素，可以切换到对应的状态。

通过这些步骤，你可以方便地在 Chrome 开发者工具中查看元素在 :hover 状态下的样式。

示例说明

让我们通过一个简单的示例来说明如何在 Chrome 开发者工具中查看 :hover 状态。

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:hover {
  background-color: #45a049;
}
</style>
</head>
<body>

<button class="button">Hover over me</button>

</body>
</html>

在上面的示例中，我们定义了一个按钮的样式，并在 :hover 状态下改变了背景颜色。现在，让我们通过 Chrome 开发者工具来查看这个按钮在 :hover 状态下的样式：