如何用CSS实现悬停首个div时缩小另外两个div？

嘿，我明白你遇到的问题了——之前用兄弟选择器只能影响到后面的元素，前面的没法选中对吧？别担心，咱们用父容器结合:not()伪类就能轻松解决这个问题，完全不需要JS。

核心思路 #

把三个Div放在同一个父容器里，当鼠标悬停在任意一个子Div上时，让父容器中所有不是当前悬停状态的子Div应用缩小样式。这样不管悬停哪一个，另外两个都会同时缩小，完美实现你要的突出效果。

完整代码示例 #

HTML结构

<div class="container">
  <div class="item item-1">第一个Div</div>
  <div class="item item-2">第二个Div</div>
  <div class="item item-3">第三个Div</div>
</div>

CSS样式

/* 父容器：用flex排列子元素，间距和居中可以按需调整 */
.container {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

/* 子元素：设置基础样式，加上过渡动画让缩放更平滑 */
.item {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 8px;
  font-size: 18px;
  transition: transform 0.3s ease; /* 关键：过渡动画 */
}

/* 核心规则：悬停父容器内的任意item时，其他非悬停item缩小 */
.container:hover .item:not(:hover) {
  transform: scale(0.8); /* 缩放比例可以自己调 */
}

/* 可选：给悬停的item加个高亮效果，突出更明显 */
.item:hover {
  background-color: #42b983;
  color: white;
}

为什么这个方案有效？ #

• 父容器的:hover会在鼠标进入任何子元素时触发，但我们用:not(:hover)精准排除了当前被鼠标悬停的那个子元素，只对另外两个应用缩小样式。
• 过渡动画transition让缩放过程更流畅，不会显得突兀。
• 不管你悬停哪一个子Div，另外两个都会同时受到影响，解决了兄弟选择器只能单向选择的问题。

你可以根据自己的需求调整缩放比例、过渡时长、颜色样式这些参数，完全适配你的项目网站~

内容的提问来源于stack exchange，提问作者Abdul Azis Vedra Pandi