Question

我在React中有一个按钮，当我将鼠标悬停在它上面时，会发生一个时髦的锯动画。但是，我真正想要的效果是当我将鼠标悬停在按钮上时，页面上的H1标签会在后台出现锯动画。然而，每当我添加一个className并尝试在按钮中定位它时：hover css，我没有任何效果。我试过.btn：hover h1和.btn：hover。＆＃34; classname＆＃34;和许多其他组合。但没有工作。

当将鼠标悬停在一个没有直接连接到会产生效果的类，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
  }

以下是codepen：https://codepen.io/palash/pen/ZvVNav

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

Answer 2

只需使用javascript ...

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

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

2 个答案: