CSS中*:hover选择器无法为所有元素添加悬停效果的问题

修复方案1：用outline替代border #

因为border会被子元素的边框覆盖，改用outline就能让所有元素的hover效果正常显示：

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  outline: solid .5px #dbdbdb;
  /* 可选：加这个避免outline和内容重叠 */
  outline-offset: -1px;
}

*:hover {
  outline: solid .5px #737373;
}

<div>
  <h1>Example Domain</h1>
  <p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p>
  <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>

修复方案2：让父元素hover时子元素保持原边框 #

如果你希望鼠标停在父元素上时，只有父元素边框变色，子元素不变：

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  border: solid .5px #dbdbdb;
}

*:hover {
  border-color: #737373;
}

/* 悬停父元素时，强制子元素用默认边框 */
*:hover * {
  border-color: #dbdbdb;
}

为什么会出现这个问题 #

不是*:hover没生效，是子元素的边框挡住了父元素的hover效果：

• *选择器会选中所有元素，包括父元素和所有子元素，所以每个元素都有浅灰色边框。
• 当鼠标移到<div>上时，<div>确实触发了hover，边框变深，但它里面的<h1>、<p>还保持浅灰色边框，这些子元素的边框在视觉上盖过了父元素的深边框，导致你看不到父元素的变化。
• 而<a>是行内元素，它的边框直接包着自身内容，没有子元素遮挡，所以hover效果一眼就能看到。

内容的提问来源于stack exchange，提问作者Moel