CSS实现圆形视觉div保留方形可点击区域解决hover抖动问题

抖动的本质是hover命中区域随样式动态变化，形成了触发-失效的循环：

• 非hover状态下div是方形，四个角落属于命中范围，鼠标移到角落就会触发hover
• hover触发后div加了border-radius: 50%变成圆形，浏览器的hover命中判定会跟随元素实际渲染的可视形状，四个角落不在圆形范围内，hover状态立刻失效
• hover失效后div回到方形，鼠标再次落在命中区域内，hover又被触发，反复循环就出现了抖动。

核心逻辑是把元素的点击/hover命中区域和视觉呈现层拆分，保证命中区域始终是固定的方形，形状变化效果只在视觉层渲染，不影响命中判定。最简便的实现是用伪元素承载视觉样式：

.container {
  position: relative;
  width: 150px;
  height: 150px;
  /* 父容器本身不设置背景、圆角，始终保持150*150的方形命中区域 */
  cursor: pointer;
}

/* 伪元素负责所有视觉效果 */
.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: orange;
  /* 可选：加过渡让形状变化更顺滑 */
  transition: .2s ease;
}

/* hover时只修改伪元素的样式，完全不影响父容器的命中规则 */
.container:hover::before {
  border-radius: 50%;
  background-color: red;
}

HTML不需要修改，保持原有结构即可：

<div class="container"></div>

方案说明 #

• 整个150px*150px的方形区域始终是有效触发范围，点击、hover都不会出现抖动
• 如果容器内部需要放置文字、按钮等内容，给内容元素设置position: relative; z-index: 1就能保证内容显示在视觉层上方，正常交互
• 不要直接在元素本身的hover状态下修改会改变命中区域的属性（包括border-radius、clip-path、宽高偏移等），这类修改都容易出现hover循环触发的抖动问题

内容的提问来源于stack exchange，提问作者Felix Simon Barredo