CODEWITHSUNDEEP
javascriptcssreactjshover
VI11age_ID10T
VI11age_ID10T

Reputation: 161

from :hover to a togglebutton in react

What I am trying to do:

I have a card that when hovered over expands and does a bunch of different animations i worked on. this is great for desktop and not mobile. So when the screen is a certain res I make a toggle button visible. I want this button in react to when clicked on enable the save:hover State its grabbing from my css.

The Problem

The button is inside the card aleady and everything in the css is setup for the parent div card.

my code structure simplified

<div className="card">
    <-- CODE HERE -->
    <Button className="myToggleButton" />
<div/>

I cant from what i can tell in css exclusively say myToggleButton:focus do these changes to the following classes since they are parent ones. So i think my only other way to do that is by telling it in react somehow to say that my div is in :hover state, but I can't quite figure out how despite my efforts. Thank you in advance for any help on this.

Upvotes: 0

Views: 308

Answers (1)

Chunky Chunk
Chunky Chunk

Reputation: 17237

Instead of activating your animation with the :hover pseudo class, you can simply add or toggle another custom class, which would contain the values to transition or keyframes to animate, to the card element when the button is clicked. In this example I just use a transition, but you could also employ a more complex keyframe animation.

const card = document.querySelector(".card");
const button = document.querySelector(".card > button");

const animate = () => {
  card.classList.toggle("small");
  card.classList.toggle("big");
}

button.addEventListener("click", animate);
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 250ms ease-in-out;
}

.small {
  width: 200px;
  height: 50px;
  background-color: gray;
}

.big {
  width: 400px;
  height: 150px;
  background-color: blue;
}
<div class="card small">
  My Amazing Card
  <button>Animate</button>
</div>

Upvotes: 1

Related Questions