javascript - 悬停在按钮上时如何影响不同的类或 HTML 元素？

Question

我在 React 中有一个按钮，当我将鼠标悬停在它上面时，会出现一个时髦的锯齿动画。但是，我真正想要的效果是当我将鼠标悬停在按钮上时，页面上的 H1 标记在背景中出现锯齿动画。然而，每当我添加一个 className 并尝试在 button:hover css 中定位它时，我都没有效果。我试过 .btn:hover h1 和 .btn:hover."classname"以及其他一些组合。但没有工作。

当鼠标悬停在未直接连接到将产生效果的类、div 或 h1 的按钮上时，如何定位类、div 或 h1？

我为此使用的当前 CSS(适用于按钮本身)是:

.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;
  }
}

我的模板是:

  return (
        <div className="App">
            <h1>Question Genie</h1>
            <button className="btn" onClick={this.displayQuestion}>View Unanswered Questions</button>
            {questions}     
        </div>
    );
  }
}

Answer 1

您可以使用下一个兄弟选择器 ( ~ ) 和 flexbox column-reverse 来完成此操作。这里的主要问题是 there is no previous sibling selector in CSS 因此，您可以重新排序 HTML，以便 <h1>在<button>之后，像这样:

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

然后你可以使用flex-direction: column-reverse; (甚至是按钮上的 order: -1)来制作 <h1>出现在 <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
  }

这是代码笔:https://codepen.io/palash/pen/ZvVNav

请务必在此处检查 flexbox 支持 https://caniuse.com/#feat=flexbox