Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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?

+2
−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.

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

CSS combinators, perhaps? (8 comments)
CSS combinators, perhaps?
elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

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 almost 2 years ago · edited almost 2 years ago

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 almost 2 years ago · edited almost 2 years ago

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 almost 2 years ago

closing the button element with </div>

Oh wait. OMEGALUL

General Sebast1an‭ wrote almost 2 years ago

elgonzo‭ I'm starting to give up on these combinators. Any advice?

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

As the documentation says, when using the ~ combinator, the div element (to be found by the .ani-square selector) has to come after the button element (to be found by the .detect:hover selector) in the HTML document. And the div element has to be a sibling (which is NOT a child/descendant) of the button element.

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

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

.detect:hover + .ani-square {
  animation-play-state: running;
}
elgonzo‭ wrote almost 2 years ago · edited almost 2 years ago

~ 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... ¯\(ツ)