React实现按钮初始隐藏hover显示功能求助（附代码）

嗨，我来帮你搞定这个按钮显示/隐藏的问题～ 先说说你之前写法的问题，然后给你正确的实现方案：

为什么你的方法没生效？ #

1. 第一种方法的问题：你给按钮设置了display: none，这时候按钮虽然在DOM里，但它是完全不可见且无法交互的——你根本没法把鼠标悬浮在一个看不见的元素上，所以按钮的&:hover选择器永远不会被触发。
2. 第二种方法的问题：CSS选择器写反了！你写的.leftButton:hover .father是在找.leftButton内部的.father元素，但你的DOM结构是.father包裹.leftButton，所以这个选择器完全匹配不到目标元素。

正确的实现方案 #

我们的核心思路是：让父元素保持可见可交互，当鼠标悬浮在父元素上时，控制子按钮显示。这样就能绕开“隐藏元素无法被hover”的问题。

方案1：用display实现即时显示/隐藏（无过渡动画）

首先调整CSS：

.father {
  /* 给父元素设置和按钮一样的尺寸/位置，确保鼠标能hover到正确区域 */
  position: relative;
  width: 36px;
  height: 36px;
  margin-top: 290px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer; /* 提示用户这里可交互 */
}

.leftButton {
  border: none;
  outline: 0;
  padding: 0;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background-color: #314561;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  display: none; /* 默认隐藏按钮 */
}

/* 关键：父元素hover时，显示子按钮 */
.father:hover .leftButton {
  display: block;
}

然后是React的render代码：

render() {
  return (
    <div className={styles.father}>
      <button className={styles.leftButton}>←</button> {/* 给按钮加个图标/文字，不然显示后看不到内容 */}
    </div>
  );
}

方案2：用opacity实现平滑过渡动画

如果你想要按钮显示/隐藏时有渐变效果，可以用opacity代替display（因为display不支持过渡动画），同时用pointer-events控制按钮的交互性：

.father {
  /* 和方案1的父元素样式一致 */
  position: relative;
  width: 36px;
  height: 36px;
  margin-top: 290px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.leftButton {
  /* 其他样式不变 */
  border: none;
  outline: 0;
  padding: 0;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background-color: #314561;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  opacity: 0; /* 默认完全透明 */
  pointer-events: none; /* 透明时不响应鼠标事件，避免干扰父元素hover */
  transition: opacity 0.3s ease; /* 0.3秒的渐变动画 */
}

.father:hover .leftButton {
  opacity: 1; /* 悬浮时完全显示 */
  pointer-events: auto; /* 恢复鼠标交互 */
}

React的render代码和方案1一样就可以啦～

内容的提问来源于stack exchange，提问作者BecomeBamboo