animation-play-state doesn't work properly-CodePudding

Hi everyone I have problem with animation-play-state: paused property used in hover state. One of way to solve my problem is changing div and button sequence but I would like to know how to write hover selector properly. I tried selector like this button:hover ~div selector but I don't know why general sibling ~ selector doesn't work? I would appreciate any proposal.

body {
  margin: 0;
  height: 100vh;
  background-image: radial-gradient(
    circle,
    rgb(0, 0, 0) 4%,
    rgb(255, 100, 20) 4%,
    rgb(255, 100, 20) 10%,
    rgb(10, 100, 35) 10%,
    rgb(10, 100, 35) 15%,
    rgb(255, 255, 255) 15%
  );
}

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: #ff7e7e;
  animation: game 3s linear, shaking 2s linear;
}

.action {
  position: fixed;
  top: 80%;
  left: 90%;
  line-height: 1.3;
  border: 2px solid black;
  padding: 10px 40px;
  font-size: 30px;
  cursor: pointer;
}

button:hover ~ div.square {
  animation-play-state: paused;
}

.action:hover {
  background-color: rgb(35, 231, 9);
}

@keyframes game {
  10% {
    left: 40%;
    top: 10%;
  }

  15% {
    left: 30%;
    top: 15%;
  }

  18% {
    left: 20%;
    top: 20%;
  }

  30% {
    left: 55%;
    top: 40%;
  }

  35% {
    left: 45%;
    top: 40%;
  }
  55% {
    left: 60%;
    top: 65%;
  }
  70% {
    left: 75%;
    top: 60%;
  }
  80% {
    left: 35%;
    top: 30%;
  }
  100% {
    left: 25%;
    top: 25%;
  }
}

@keyframes shaking {
  10% {
    transform: translate(-5vh, -5vh);
  }

  15% {
    transform: translate(10vw, 10vw);
  }

  18% {
    transform: translate(15vw, 7vw);
  }

  30% {
    transform: translate(-8vw, -7vw);
  }

  40% {
    transform: translate(3vw, 6vw);
  }

  50% {
    transform: translate(8vw, 10vw);
  }

  60% {
    transform: translate(13vw, 17vw);
  }

  70% {
    transform: translate(18vw, 13vw);
  }
  80% {
    transform: translate(12vw, 6vw);
  }
  90% {
    transform: translate(5vw, 3vw);
  }
  100% {
    transform: translate(1vw, -1vw);
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div ></div>
    <button >Stop</button>
  </body>
</html>

CodePudding user response：

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element. conclusion: in this case Div should come after Button

body {
  margin: 0;
  height: 100vh;
  background-image: radial-gradient(
    circle,
    rgb(0, 0, 0) 4%,
    rgb(255, 100, 20) 4%,
    rgb(255, 100, 20) 10%,
    rgb(10, 100, 35) 10%,
    rgb(10, 100, 35) 15%,
    rgb(255, 255, 255) 15%
  );
}

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: #ff7e7e;
  animation: game 3s linear, shaking 2s linear;
}

.action {
  position: fixed;
  top: 80%;
  left: 90%;
  line-height: 1.3;
  border: 2px solid black;
  padding: 10px 40px;
  font-size: 30px;
  cursor: pointer;
}

button:hover ~ div.square {
  animation-play-state: paused;
}

.action:hover {
  background-color: rgb(35, 231, 9);
}

@keyframes game {
  10% {
    left: 40%;
    top: 10%;
  }

  15% {
    left: 30%;
    top: 15%;
  }

  18% {
    left: 20%;
    top: 20%;
  }

  30% {
    left: 55%;
    top: 40%;
  }

  35% {
    left: 45%;
    top: 40%;
  }
  55% {
    left: 60%;
    top: 65%;
  }
  70% {
    left: 75%;
    top: 60%;
  }
  80% {
    left: 35%;
    top: 30%;
  }
  100% {
    left: 25%;
    top: 25%;
  }
}

@keyframes shaking {
  10% {
    transform: translate(-5vh, -5vh);
  }

  15% {
    transform: translate(10vw, 10vw);
  }

  18% {
    transform: translate(15vw, 7vw);
  }

  30% {
    transform: translate(-8vw, -7vw);
  }

  40% {
    transform: translate(3vw, 6vw);
  }

  50% {
    transform: translate(8vw, 10vw);
  }

  60% {
    transform: translate(13vw, 17vw);
  }

  70% {
    transform: translate(18vw, 13vw);
  }
  80% {
    transform: translate(12vw, 6vw);
  }
  90% {
    transform: translate(5vw, 3vw);
  }
  100% {
    transform: translate(1vw, -1vw);
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    
    <button >Stop</button>
    <div ></div>
  </body>
</html>

CodePudding user response：

You need to reverse the order of the button and the .square div elements in the HTML code, otherwise the hover selector won't work as intended, since ~ only applies to subsequent sibling elements:

body {
  margin: 0;
  height: 100vh;
  background-image: radial-gradient(
    circle,
    rgb(0, 0, 0) 4%,
    rgb(255, 100, 20) 4%,
    rgb(255, 100, 20) 10%,
    rgb(10, 100, 35) 10%,
    rgb(10, 100, 35) 15%,
    rgb(255, 255, 255) 15%
  );
}

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: #ff7e7e;
  animation: game 3s linear, shaking 2s linear;
}

.action {
  position: fixed;
  top: 80%;
  left: 90%;
  line-height: 1.3;
  border: 2px solid black;
  padding: 10px 40px;
  font-size: 30px;
  cursor: pointer;
}

button:hover ~ div.square {
  animation-play-state: paused;
}

.action:hover {
  background-color: rgb(35, 231, 9);
}

@keyframes game {
  10% {
    left: 40%;
    top: 10%;
  }

  15% {
    left: 30%;
    top: 15%;
  }

  18% {
    left: 20%;
    top: 20%;
  }

  30% {
    left: 55%;
    top: 40%;
  }

  35% {
    left: 45%;
    top: 40%;
  }
  55% {
    left: 60%;
    top: 65%;
  }
  70% {
    left: 75%;
    top: 60%;
  }
  80% {
    left: 35%;
    top: 30%;
  }
  100% {
    left: 25%;
    top: 25%;
  }
}

@keyframes shaking {
  10% {
    transform: translate(-5vh, -5vh);
  }

  15% {
    transform: translate(10vw, 10vw);
  }

  18% {
    transform: translate(15vw, 7vw);
  }

  30% {
    transform: translate(-8vw, -7vw);
  }

  40% {
    transform: translate(3vw, 6vw);
  }

  50% {
    transform: translate(8vw, 10vw);
  }

  60% {
    transform: translate(13vw, 17vw);
  }

  70% {
    transform: translate(18vw, 13vw);
  }
  80% {
    transform: translate(12vw, 6vw);
  }
  90% {
    transform: translate(5vw, 3vw);
  }
  100% {
    transform: translate(1vw, -1vw);
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button >Stop</button>
    <div ></div>
  </body>
</html>