光标悬停时使用 css display <button />

Question

我想在reactJS中实现一个功能，<button />页面加载时隐藏，并将光标悬停在其上显示，我尝试了很多方法但仍然没有解决问题。我的代码下来了，谢谢各位大师。

.leftButton {

  margin-top: 290px;

  border: none;

  outline: 0;

  padding: 0;

  height: 36px;

  width: 36px;

  transition: 3s;

  border-radius: 50%;

  background-color: #314561;

  color: #fff;

  position: absolute;

  top: 50%;

  //z-index: 10;

  transform: translateY(-50%);

  text-align: center;

  font-size: 12px;

  cursor: pointer;

  display: none;

  &:hover {

   display: block;

  }

}

render() {

return <button className={styles.leftButton>

}

到那时，我发现有人说使用标签包装，我试过了，还是不行

.father {

  cursor: pointer;

}

.leftButton:hover .father {

  cursor: pointer;

  display: block;

}

return(

 <div className={styles.father}>

    <button className={styles.leftButton} />

 </div>);

Answer 1

无需包装您的按钮，只需使用此 css：.leftButton {&nbsp; cursor: pointer;&nbsp; opacity: 0;}.leftButton:hover {&nbsp; opacity: 1;}<button className={styles.leftButton} />