javascript - How to make the button in such a way that hovering it results in the rotation and spinning of another object? - Stack Overflow

2024.10.01 20:52

Skip to main content Stack Overflow About Products OverflowAI Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand OverflowAI GenAI features for Teams OverflowAPI Train & fine-tune LLMs Labs The future of collective knowledge sharing About the company Visit the blog

current community

Stack Overflow help chat Meta Stack Overflow

your communities

more stack exchange communities

company blog Log in Sign up Home Questions Tags Users Companies Labs Jobs Discussions Recent Tags Collectives

Communities for your favorite technologies. Explore all Collectives

Teams

Now available on Stack Overflow for Teams! AI features where you work: search, IDE, and chat.

Learn more Explore Teams Teams

Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

Ask Question Asked 3 years, 1 month ago Modified 3 years, 1 month ago Viewed 379 times 0

I have the following code in which the star is automatically spinning around the crescent and hovering it makes it rotate . There is also a button on the left side: when it is hovered, it only changes its background-color and text-color; however, I want the star to start spinning and rotating when the button is hovered (and also want the effects of the button i.e. changing its background color and text color, to maintain simultaneously). I tried using different codes but everything I do results in messing the code up further.

!DOCTYPE html html head style body { position: relative; right: -500px; bottom: -150px; } .moon, .star { background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: 120%; /* Resize the background image to cover the entire container */ -moz-border-radius: 50%; /* to make circle shape */ -webkit-border-radius: 50%; border-radius: 50%; } .moon { background-color: transparent; background-image: url("https://i.sstatic.net/0bcIk.png"); position: absolute; width: 200px; height: 200px; margin: 50px; } .star { position: relative; background-color: transparent; background-image: url("https://i.sstatic.net/gjbgR.png"); width: 100px; height: 100px; } .rotate { width: 100%; height: 100%; -webkit-animation: circle 10s infinite linear; } .moon:hover .counterrotate { width: 50%; height: 50%; -webkit-animation: ccircle 10s infinite linear; } @-webkit-keyframes circle { from { -webkit-transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(360deg); } } @-webkit-keyframes ccircle { from { -webkit-transform: rotateZ(360deg); } to { -webkit-transform: rotateZ(0deg); } } .moon:hover .counterrotate { animation-name: inherit; animation-duration: 5s; transition-duration: 0.2s; } button { background-color: white; color: black; text-align: center; padding: 16px 32px; font-size: 16px; cursor: pointer; border: 2px solid green; display: inline-block; transition-duration: 0.3s; position: relative; left: -350px; border-radius: 50px; bottom: -100px; } button:hover { background-color: green; color: white; display: inline-block; border: 1px solid white; transition: 0.5s; } /style /head body style="background-color: green" div class="moon" div class="rotate" div class="counterrotate" div class="star" /div /div /div /div button Hover /button /body /html

How can I do that?

javascript html css button hover Share Improve this question Follow edited Aug 14, 2021 at 19:11 pr0grammar asked Aug 14, 2021 at 14:05 pr0grammar pr0grammar 107 11 11 bronze badges 10 With just CSS you cannot select and manipulate elements(1) depending on actions on other elements(2) which have no relationship ( descendant, sibling down the DOM tree ) with the elements (1) that you want to manipulate. You can do it with javascript. – Mihai T Commented Aug 14, 2021 at 14:14 @MihaiT: Doing that with JS is also fine. Could you post an answer showing how to do that? (I ll edit it to include JavaScript tag) – pr0grammar Commented Aug 14, 2021 at 14:15 First, you need to try it on your own. Share what you have tried ( using js ) and we can help you from there – Mihai T Commented Aug 14, 2021 at 14:16 @MihaiT: Sorry. I m a beginner and have just started HTML/CSS, I don t know about JS. – pr0grammar Commented Aug 14, 2021 at 14:20 Well unfortunately StackOverflow is not a free code making community . THere are other communities out there that can help you ( for a price ) . Here we can help you debug/improve your code but not make the code for you. Maybe you are lucky and someone will write the code for you but i doubt it. – Mihai T Commented Aug 14, 2021 at 14:23 | Show 5 more comments

1 Answer 1

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 1

If I have understood the requirement correctly, you do not need Javascript for this.

However, CSS is not currently able to style a sibling element that is before a hovered element (it can't 'go back up' the DOM). But it can style a sibling element that follows the hovered element.

So the first change is to put the button element before the moon element. Now when the button element is hovered we can select its immediate sibling using the + combinator and from there we can select the rotate and moon elements to give them the animations required for rotating and spinning. (In this case we have left the definition of rotate as it is in the code in the question and introduced the spin animation to keep the star spinning around its center).

Now when the button is hovered the star rotates (moves in a large circle) and spins (rotates about its own center).

This snippet also makes the star spin when it is hovered and doesn't have any movement when there is no hovering. Obviously you can change the styling to have what you want there. Also the counterrotation is removed and the -webkit- prefixes, just to simplify things (and you don't want -webkit- with no vanilla setting set as well as some browsers may not interpret it).

!DOCTYPE html html head style body { position: relative; right: -500px; bottom: -150px; } .moon, .star { background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: 120%; /* Resize the background image to cover the entire container */ border-radius: 50%; } .moon { background-color: transparent; background-image: url("https://i.sstatic.net/0bcIk.png"); position: absolute; width: 200px; height: 200px; margin: 50px; } .star { position: relative; background-color: transparent; background-image: url("https://i.sstatic.net/gjbgR.png"); width: 100px; height: 100px; transform: rotate(0deg); } button:hover+.moon .star, .star:hover { animation: spin 5s infinite linear; } @keyframes spin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } button:hover+.moon .rotate { width: 100%; height: 100%; animation: circle 10s infinite linear; } @keyframes circle { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } button { background-color: white; color: black; text-align: center; padding: 16px 32px; font-size: 16px; cursor: pointer; border: 2px solid green; display: inline-block; transition-duration: 0.3s; position: relative; left: -350px; border-radius: 50px; bottom: -100px; } button:hover { background-color: green; color: white; display: inline-block; border: 1px solid white; transition: 0.5s; } /style /head body style="background-color: green" button Hover /button div class="moon" div class="rotate" div class="star" /div /div /div /body /html

Share Improve this answer Follow answered Aug 15, 2021 at 6:31 A Haworth A Haworth 35.5k 4 4 gold badges 15 15 silver badges 15 15 bronze badges 1 Couldn t hope for a better answer! Thanks! :) – pr0grammar Commented Aug 15, 2021 at 10:40 Add a comment |

Not the answer you're looking for? Browse other questions tagged javascript html css button hover or ask your own question .

The Overflow Blog Ongoing community data protection A developer works to balance the data center boom with his climate change battle Featured on Meta Join Stack Overflow’s CEO and me for the first Stack IRL Community Event in Preventing unauthorized automated access to the network Feedback Requested: How do you use the tagged questions page?

3 How to create Hover ANIMATION Button like this? 0 I want to rotate a link on Hover 0 I want to make a circle button with text and different text on hover CSS 0 Rotation button on hover 1 Create hover effect on a div or button 0 How to make image rotate on hover css 2 Hover effect on button 1 How can I activate a rotate on a click instead of hover is css 1 how to use transform: rotate as hover? 1 css trick buttons on hover on a button

Hot Network Questions

How many days until Halloween? If Paul is keeping the law as per Acts 21:24, why does Paul say that he is not under the law in 1 Corinthians 9:20-21 Reference Request for global Hölder continuity of solutions to elliptic PDEs An app in C to create reservations for a meeting room, with three menu options In a perfect vacuum, shouldn't every solid be above its sublimation point, since its vapor pressure must exceed the atmospheric pressure? Denied entrance into the UK 30 yrs ago, will I need a visa to visit friends in London? What is meant by the phrase ' sat at meat '? Interpreting this spacetime diagram involving two accelerating observers How to allocate for later placement new as if by new Can you destroy a spiritual weapon? Is it Possible to Successfully Do a PhD in the UK Without Formal University Enrolment? Can you identify these two characters from the loading screen? Grooves or Rings on a Jig I'm confused with composite direction verbs, help me sort it out Why do many night shots use streets that are wet? Typing accent ague (é) on Windows 10 How to safely use oscilloscope when measuring mains voltage How to prevent negative variance estimates in likelihood optimization? The technician test Virtual layer from CSV How can a social norm that discussions about faith are an intimate topic survive the existence of proactive religions? How do I replace a sink disposal if there's no power outlet? Does God the Son have Faith? Sci-fi story whose moral is to use the tools/weapons you have at your disposal more hot questions Question feed

Subscribe to RSS

Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

default

Stack Overflow

Questions Help Chat

Products

Teams Advertising Talent

Company

About Press Work Here Legal Privacy Policy Terms of Service Contact Us Cookie Settings Cookie Policy

Stack Exchange Network

Technology Culture & recreation Life & arts Science Professional Business API Data Blog Facebook Twitter LinkedIn Instagram

button way

Welcome to button way