同一div内hover联动实现：双螺旋桨同步旋转需求咨询

完全可以实现你要的效果，核心思路是利用父容器的hover状态控制所有子螺旋桨，同时子元素的hover会触发父容器的hover状态，因此hover任意螺旋桨时也能同步触发所有螺旋桨旋转。

修正后的完整代码 #

HTML（给螺旋桨添加统一类名，简化选择逻辑）

<div class="slide-right">
  <a id="rotator6" class="propeller">
    <img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/propeller-screw-2848202-2368700.png" />
  </a>
  <a id="rotator5" class="propeller">
    <img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/propeller-screw-2848202-2368700.png" />
  </a>
</div>

CSS（修复语法错误，实现同步旋转逻辑）

/* 容器基础样式 */
div.slide-right {
  width: 100%;
  position: relative; /* 让绝对定位的子元素基于容器定位 */
  min-height: 150px; /* 保证容器有可hover的区域 */
}

div.slide-right div.inner {
  animation: slide-right 5s;
  margin-left: 18%;
}

@keyframes slide-right {
  from { margin-left: 0%; }
  to { margin-left: 18%; }
}

/* 螺旋桨通用样式 */
.propeller {
  position: absolute;
  top: 53px;
}

#rotator6 {
  left: 332px; /* 用left替代margin-left，更适配绝对定位元素 */
}

#rotator5 {
  left: 507px;
}

.propeller img {
  border-radius: 60px;
  transition: all 1s ease-in-out; /* 统一设置过渡动画，去掉冗余前缀 */
}

/* 核心逻辑：hover容器时，所有螺旋桨同步旋转 */
.slide-right:hover .propeller img {
  transform: rotate(1440deg);
}

关键细节说明 #

1. 父容器定位修正：给.slide-right添加position: relative，确保两个绝对定位的螺旋桨不会脱离容器乱跑；同时设置min-height，保证容器有可触发hover的区域。
2. 统一类名优化代码：给两个螺旋桨的<a>标签添加.propeller类，避免重复编写相同样式，同时方便批量选择子元素。
3. hover状态复用：当hover容器本身，或者hover容器内的任意螺旋桨时，父容器的:hover状态都会被触发，从而让所有螺旋桨同步执行旋转动画。
4. 修复原代码错误：原代码存在CSS嵌套语法错误（将#rotator5的样式写在#rotator6 img:hover内部），且transform: translate()为无效写法，已替换为正确的rotate(1440deg)。

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