Question 381930 in Html Question posted in
Some basic documentation can be found here.

Html – One hover to trigger another hover in the same div

I have an aeroplane and two propellers

I want to spin both propellers on hover, I can do it separately, but not together. Basically I want to hover one propeller (or the plane) and trigger the hover for the other propeller as well. Is this possible?

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 ??????????

So if I can trigger the hovers using the div.slide-right:hover what syntax is necessary?

  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>
Tags:

2

Answers


  1. 0

    If you’re okay with using some JavaScript, and a few changes to your HTML, here’s how you can do it:

    "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((prop) => prop.classList.add("rotate-prop"));
  });
  rot.addEventListener("mouseleave", function () {
    propellers.forEach((prop) => prop.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>
    Login or Signup to reply.
  2. 0

    You can either do this by applying :hover on a common parent element; so if stuff should rotate here, as soon as .slide-right gets hovered anywhere, you could simply use that, .slide-right:hover img – or wrap the two propellors into an additional element.

    If you don’t want that, then you could still use :has() to "check" if one of the images inside the parents is getting hovered.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search