Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Comments on How do I get an animation from another source playing through hovering?

Post

How do I get an animation from another source playing through hovering?

−0

I was tasked with an assignment where I should get a box to move to the 4 corners of the viewport by hovering on a button. Most of the code is already finished except for figuring out how to get the animation running from another source, since I want only the box chosen to move and not the button. I might be dumb or something, but I still haven't figured it out.

I set up the following CSS in styles.css:

@keyframes Square {
  0% {
    top: 200px; left: 525px;
  }
  16% {
    top: 0px; left: 0px;
  }
  33% {
    top: 0px; left: 1050px;
  }
  50% {
    top: 400px; left: 1050px;
  }
  66% {
    top: 400px; left: 0px;
  }
  83% {
    top: 0px; left: 0px;
  }
  100% {
    top: 200px; left: 525px;
  }
}

.ani-square {
  background-color: blue;
  position: relative;
  top: 200px;
  left: 525px;
  width: 200px;
  height: 200px;
  animation-name: Square;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

Then used it on box.html:

<!DOCTYPE html>

<html>
  <head>
    <title>Box</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="ani-square"></div>
  </body>
</html>

Since I can't figure out the button yet, I haven't placed it in the HTML code. Is there a way to get animation running by hovering onto another block?

Edit: ~~What I wanted to do is to hover on the button then the animation starts playing. Once I hover again, the animation stops. Please include that, or not if I might be able to figure that one out.~~

Edit 2: Okay, screw that idea. I thought that to make things easier, the concept for the button is that once you hover on it, it plays, and if not, it stops. Simple. No more complexities, except for the button getting linked with the box.

html css css-animations

posted over 2 years ago

CC BY-SA 4.0

2y ago

General Sebast1an‭

136 reputation 12 3 7 12

Raw

Markdown

History

is a duplicate

This question has been asked before and has already been answered. It should be marked as a duplicate.

Please enter the URL of the proposed duplicate in the details field below.

not constructive

This question cannot be answered in a way that is helpful to anyone. It's not possible to learn something from possible answers, except for the solution for the specific problem of the asker.

1 comment thread

CSS combinators, perhaps? (8 comments)

elgonzo‭ wrote over 2 years ago · edited over 2 years ago

copy link

Since this looks like a learning exercise to me, i am just giving a hint that will hopefully get you rolling:

Using CSS combinators, you could specify CSS selectors which select an element (the "square" div) in relationship to the hovered button (assuming you structure your HTML document accordingly).

An overview of CSS combinators:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators

https://www.w3schools.com/css/css_combinators.asp

General Sebast1an‭ wrote over 2 years ago · edited over 2 years ago

copy link

elgonzo‭ I think I have something.

<body>
    <div class="ani-square"></div>
    <button class="detect">Move</div>
</body>

.detect {
  background-color: red;
  font-size: 25px;
  position: relative;
  top: 80px;
  left: -5px;
}

.detect:hover ~ .ani-square {
  animation-play-state: running;
}

Doesn't do anything though. :/

elgonzo‭ wrote over 2 years ago · edited over 2 years ago

copy link

Doesn't do anything though. :/

You are on the right track, but yes, that does not do anything. Read the documentation about ~ carefully. ~ can only select sibling elements that come after the element found by the left-hand selector (i.e., the div element has to come after the button in the html document).

Also, i don't think that closing the button element with </div> will do any good :-P

General Sebast1an‭ wrote over 2 years ago · edited over 2 years ago

copy link

elgonzo‭ I got the right combinator, but nothing happened.

.detect:hover + .ani-square {
  animation-play-state: running;
}

elgonzo‭ wrote over 2 years ago · edited over 2 years ago

copy link

~ should have worked, assuming you structure your HTML document accordingly.

But if you are sure that + is the right combinator and it's not working, then something else is amiss (aside from what i already pointed at in my comments above), something that i cannot deduce based on the limited knowledge i have about what you are actually doing/trying/experimenting on... ¯\(ツ)/¯

Communities

Comments on How do I get an animation from another source playing through hovering?

How do I get an animation from another source playing through hovering?

1 comment thread