如何用CSS实现鼠标悬停一张图片时隐藏其余图片

先理清楚原代码的问题，再直接上可运行的修复方案：

原代码的核心问题 #

• img 设置 display:flex 完全错误，flex是容器属性，不该用在图片元素上
• 直接写 img:hover {width:2500px} 过于粗暴，会直接打乱整个布局，用transform缩放更稳妥
• 缺少统一的外层容器，既没法稳定实现图片并排，也难以精准控制其他兄弟元素的显示状态

修改后的完整代码 #

<style>
/* 外层容器：实现四张图片并排布局 */
.image-container {
  display: flex;
  gap: 10px; /* 控制图片间的间距 */
  width: 100%;
  overflow: hidden; /* 防止放大的图片溢出容器 */
}

/* 图片容器：负责承载单张图片，控制自身状态 */
.zarovnaniobrazek {
  flex: 1; /* 让四个容器平分父容器宽度 */
  transition: all 0.3s ease; /* 给状态变化加过渡动画，避免生硬跳转 */
}

/* 图片基础样式 */
.zarovnaniobrazek img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border: 5px solid #555;
  transition: transform 0.3s ease;
}

/* 核心交互逻辑 */
/* 当外层容器被hover时，隐藏所有未被hover的图片容器 */
.image-container:hover .zarovnaniobrazek:not(:hover) {
  opacity: 0; /* 透明化隐藏，保留过渡动画 */
  flex: 0; /* 让隐藏的容器宽度归0，不占空间 */
}

/* 放大当前hover的图片 */
.zarovnaniobrazek:hover img {
  transform: scale(1.2); /* 用scale缩放，不会干扰其他元素布局 */
}
</style>

<div class="image-container">
  <div class="zarovnaniobrazek">
    <img src="https://via.placeholder.com/300x300.png?text=Image">
  </div>
  <div class="zarovnaniobrazek">
    <img src="https://via.placeholder.com/300x300.png?text=Another+Image">
  </div>
  <div class="zarovnaniobrazek">
    <img src="https://via.placeholder.com/300x300.png?text=Image">
  </div>
  <div class="zarovnaniobrazek">
    <img src="https://via.placeholder.com/300x300.png?text=Another+Image">
  </div>
</div>

关键逻辑说明 #

1. 用外层 image-container 做flex布局，让四个图片容器自动并排且平分宽度，解决原布局混乱的问题
2. 利用 :not(:hover) 选择器精准定位：当鼠标悬停任意一个图片容器时，选中所有未被hover的容器，通过opacity和flex属性实现隐藏
3. 图片放大用 transform: scale()，不会改变元素的实际占位，比直接修改width更稳定，不会触发其他元素的布局抖动
4. 所有状态变化添加transition过渡动画，让交互更平滑自然

如果想要瞬间隐藏的效果，把 opacity:0 换成 display:none 即可，但会失去过渡动画。

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