鼠标悬停子元素div2放大父容器container的CSS问题排查

你的CSS选择器逻辑错误，导致hover效果不触发：

• 错误选择器 .container:has(#div2:hover) .container 试图匹配包含#div2:hover的.container内部的子级.container，但你的HTML结构中外层.container没有嵌套的子container，因此无法选中目标元素。

修正方案：直接给包含悬停状态#div2的外层.container设置样式，选择器改为 .container:has(#div2:hover) 即可。

修正后的完整代码 #

CSS

.box {
  width: 200px;
  aspect-ratio: 1;
  display: inline-block;
  border: 1px solid red;
}

.box > .box-inside {
  margin-left: 40%;
  margin-top: 40%;
  height: 30px;
  width: 30px;
  border: 3px solid green;
  cursor: pointer;
}

/* 当div2悬停时放大外层container */
.container:has(#div2:hover) {
  transform: scale(1.2);
  transition: all 1s;
}

HTML

<div class="container">
  <div class="box">
    <div class="box-inside" id="div2">div2</div>
  </div>
</div>

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