如何用CSS实现Windows 10设置中的hover效果？

从你提供的示例来看，Windows 10设置里的hover效果核心是鼠标悬停时元素背景平滑变为淡灰色，同时保持原生控件的简洁风格，以下是具体实现方案：

基础HTML结构 #

先模拟设置页面的选项卡片结构：

<div class="setting-container">
  <div class="win10-item">
    <div class="item-icon">⚙️</div>
    <div class="item-text">
      <h4>系统</h4>
      <p>显示、声音、通知、电源</p>
    </div>
  </div>
  <div class="win10-item">
    <div class="item-icon">🔒</div>
    <div class="item-text">
      <h4>账户</h4>
      <p>你的信息、同步设置、工作访问</p>
    </div>
  </div>
</div>

CSS核心实现 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

/* 模拟设置页面容器 */
.setting-container {
  width: 800px;
  margin: 30px auto;
  padding: 0 16px;
  background: #fff;
}

/* 设置选项的基础样式 */
.win10-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  /* 平滑过渡动画 */
  transition: background-color 0.2s ease;
  margin-bottom: 8px;
}

/* hover核心效果 */
.win10-item:hover {
  background-color: #f2f2f2;
}

/* 图标与文字样式 */
.item-icon {
  font-size: 28px;
  margin-right: 16px;
}

.item-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.item-text p {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

深色模式适配 #

如果需要匹配Windows 10深色模式，只需添加以下媒体查询：

@media (prefers-color-scheme: dark) {
  .setting-container {
    background: #1e1e1e;
  }
  .win10-item {
    color: #fff;
  }
  .win10-item:hover {
    background-color: #2d2d2d;
  }
  .item-text p {
    color: #ccc;
  }
}

内容的提问来源于stack exchange，提问作者Josue Muñoz Avila