0

I have a button in React and when I hover over it a funky saw animation happens. However, the effect I truly want is for the H1 tag on the page to have the saw animation in the background occur when I hover over the button. Yet, whenever I add a className and try to target that in the button:hover css, I get no effect. I've tried .btn:hover h1 and .btn:hover."classname" and a number of other combinations. yet none work.

How can I target a class, div, or h1 when hovering over a button that is not directly connected to the class, div, or h1 that will have the effect?

The current CSS I'm using for this, which works for the button itself, is: 

.btn {
  color: black;
}

.btn:hover {
    animation: sawtooth 0.35s infinite linear;
    background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0 / 1em 1em
              , linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0 / 1em 1em;
    color: adjust-hue($color,180);
  }


@keyframes sawtooth {
  100% {
    background-position: 1em 0;
  }
}

The template I have is:

  return (
        <div className="App">
            <h1>Question Genie</h1>
            <button className="btn" onClick={this.displayQuestion}>View Unanswered Questions</button>
            {questions}     
        </div>
    );
  }
}
Dog
  • 2,726
  • 7
  • 29
  • 66
  • you will use selectors for that. Please, type your template. – Kenry Sanchez Jan 15 '18 at 04:00
  • i added the render template. i'm trying to get the h1 to have the button effect instead of the button, but for it to occur when i hover on the button. – Dog Jan 15 '18 at 04:02

2 Answers2

1

You can use a next sibling selector (~) and flexbox column-reverse to accomplish this. The main issue here is that there is no previous sibling selector in CSS So, you can reorder the HTML so that <h1> is after the <button>, like this:

<div class="App">
  <button class="btn" onClick={this.displayQuestion}>View Unanswered Questions</button>  
  <h1>Question Genie</h1>
</div>

and then you can use flex-direction: column-reverse; (or even order: -1 on the button) to make the <h1> appear above the <button> CSS:

.App {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.btn:hover ~ h1 {
    animation: sawtooth 0.35s infinite linear;
   ... rest of the stuff
  }

Here's the codepen: https://codepen.io/palash/pen/ZvVNav

Be sure to check flexbox support here https://caniuse.com/#feat=flexbox

Palash Karia
  • 670
  • 4
  • 10
0

Just use javascript...

<button onmouseover="H1_ID.style.animation='sawtooth 0.35s infinite linear';" onmouseout="H1_ID.style.animation='none';"></button>
user4723924
  • 16