Chrome中<p>元素:hover伪类触发异常问题求助

这确实是WebKit/Blink内核（Chrome基于该内核）的一个典型渲染行为差异——当块级元素没有明确的尺寸定义，且内部仅包含行内元素时，hover伪类的触发范围会被限制在实际有内容的区域，而非元素的整个块级范围，这和Edge/IE的渲染逻辑不同。

下面是几个经过验证的修复方案：

方案一：使用伪元素扩展hover触发区域 #

通过给目标元素添加相对定位，再用伪元素填充整个元素区域，让hover能覆盖元素的所有空间：

.hidden-controls {
  position: relative;
  width: 100%; /* 确保元素占满父容器宽度 */
}

.hidden-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 避免干扰内部按钮的交互 */
}

方案二：明确元素的尺寸范围 #

通过设置元素的宽度和最小高度，强制Chrome识别整个元素区域为可交互范围：

.hidden-controls {
  width: 100%;
  min-height: 1.5em; /* 基于文本行高设置，适配内容高度 */
}

方案三：调整元素的display属性（布局允许时） #

将元素改为inline-block并设置宽度，也能让Chrome把整个元素区域作为hover触发范围：

.hidden-controls {
  display: inline-block;
  width: 100%;
}

以上方案都能让Chrome中<p>元素的任意区域触发hover，从而正常显示隐藏的控制按钮，和Edge/IE的表现保持一致。

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