光标悬停时使用 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 {

  cursor: pointer;

  opacity: 0;

}

.leftButton:hover {

  opacity: 1;

}

<button className={styles.leftButton} />