我有一架飞机和两个螺旋桨
我想在悬停时旋转两个螺旋桨，我可以单独进行，但不能一起进行。基本上我想悬停一个螺旋桨（或飞机）并触发另一个螺旋桨的悬停。这可能吗？
div.slide-right {
width:100%;
}
div.slide-right div.inner {
animation: slide-right 5s;
margin-left:18%;
}
@keyframes slide-right {
from {
margin-left: 0%;
}
to {
margin-left: 18%;
}
}
div.slide-right:hover img ??????????
那么如果我可以使用 div.slide-right:hover 触发悬停，需要什么语法？
a#rotator6 {
margin-left: 332px;
margin-top: 53px;
position: absolute;
}
a#rotator6 img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
border-radius: 60px;
transition-duration: 1s;
}
a#rotator6 img:hover {
-webkit-transform: rotate(1440deg);
-moz-transform: rotate(1440deg);
-o-transform: rotate(1440deg);
-ms-transform: rotate(1440deg);
transform: translate();
a#rotator5 {
margin-left: 507px;
margin-top: 53px;
position: absolute;
}
a#rotator5 img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
border-radius: 60px;
transition-duration: 1s;
}
a#rotator5 img:hover {
-webkit-transform: rotate(1440deg);
-moz-transform: rotate(1440deg);
-o-transform: rotate(1440deg);
-ms-transform: rotate(1440deg);
transform: translate();
}<div class="slide-right">
<a id="rotator6"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/propeller-screw-2848202-2368700.png" /></a>
<a id="rotator5"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/propeller-screw-2848202-2368700.png" /></a>
</div>如果您可以使用一些 JavaScript，并对 HTML 进行一些更改，则可以按照以下步骤操作：
"use strict";
const rotator5 = document.getElementById("rotator5");
const rotator6 = document.getElementById("rotator6");
const rotators = [rotator5, rotator6];
const propellers = document.querySelectorAll(".prop-img");
rotators.forEach(function (rot) {
rot.addEventListener("mouseenter", function () {
propellers.forEach((rot) => rot.classList.add("rotate-prop"));
});
rot.addEventListener("mouseleave", function () {
propellers.forEach((rot) => rot.classList.remove("rotate-prop"));
});
});a#rotator6 {
margin-left: 332px;
margin-top: 53px;
position: absolute;
}
a#rotator6 img,
a#rotator5 img {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
border-radius: 60px;
transition-duration: 1s;
}
.rotate-prop {
transition: all 0.5s ease-in-out;
-webkit-transform: rotate(1440deg);
-moz-transform: rotate(1440deg);
-o-transform: rotate(1440deg);
-ms-transform: rotate(1440deg);
transform: translate();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="slide-right">
<a id="rotator6"><img
src="https://cdn.iconscout.com/icon/premium/png-256-thumb/propeller-screw-2848202-2368700.png"
class="prop-img" /></a>
<a id="rotator5"><img
src="https://cdn.iconscout.com/icon/premium/png-256-thumb/propeller-screw-2848202-2368700.png"
class="prop-img" /></a>
</div>
</body>
</html>