CSS如何实现仅当图片和内部按钮都未hover时恢复原样式？

你遇到的核心问题是：当鼠标从图片移到内部按钮上时，图片的:hover状态消失，导致图片恢复原尺寸。要实现“仅当图片和按钮都未被hover时才恢复原尺寸”的效果，最简洁的方案是把图片和按钮放到同一个父容器中，通过监听父容器的:hover状态来控制两者的缩放。

调整HTML结构 #

首先将图片和按钮包裹在一个父容器内：

<div class="ProjectContainer">
  <img class="ProjectImage" src="your-image-url" alt="项目图片">
  <button class="ProjectLiveVersionButton">查看在线版本</button>
</div>

优化CSS代码 #

利用父容器的:hover状态同时控制图片和按钮的缩放，这样只要鼠标处于容器范围内（无论是在图片还是按钮上），容器都会保持:hover状态，子元素也就不会恢复原尺寸：

/* 父容器样式，根据布局需求调整 */
.ProjectContainer {
  position: relative;
  display: inline-block;
}

/* 给图片和按钮统一设置过渡效果 */
.ProjectImage, .ProjectLiveVersionButton {
  transition: all 0.5s ease;
}

/* 父容器hover时，同时放大图片和按钮 */
.ProjectContainer:hover .ProjectImage,
.ProjectContainer:hover .ProjectLiveVersionButton {
  transform: scale(1.1);
}

方案说明 #

原来的写法是单独监听图片的:hover，当鼠标移到按钮上时，图片的:hover状态会丢失，导致图片缩放恢复。而父容器的:hover状态会覆盖整个容器区域，只要鼠标在容器内的任何位置（图片或按钮），容器都会保持:hover状态，从而让图片和按钮持续保持放大效果。

另外，CSS中并没有&&这种逻辑与的选择器写法，通过父容器代理hover状态是实现这类需求的标准做法。

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