CSS与React中display过渡失效及购物车hover触达问题排查

为啥会出问题 #

• 鼠标移不过去：购物车是绝对定位，脱离了按钮的布局流，按钮的hover范围只有自身。鼠标从按钮文本往购物车挪的时候，中间的空隙会让按钮的hover状态消失，购物车直接就没了。
• 过渡不生效：display: none/block 这个属性没法做过渡，CSS过渡只认像opacity、visibility这种能计算中间值的属性。

直接改代码解决 #

第一步：重写CSS，换掉display属性 #

用 opacity + visibility + pointer-events 来控制显示隐藏，既能做过渡，又能保证交互正常：

.cartBtn {
  appearance: none;
  outline: none;
  border: none;
  cursor: pointer;
  text-align: center;
  background-color: transparent;
  color: inherit;
  position: relative; /* 让购物车能相对于按钮定位 */
  padding-bottom: 8px; /* 给按钮加底部内边距，把hover范围延伸到购物车上方 */
}

.cartBtn:hover {
  color: black;
}

.cart {
  position: absolute;
  top: 100%; /* 让购物车紧贴按钮底部，直接消除间隙 */
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 一开始不让购物车抢鼠标事件 */
  transition: all 0.4s ease-in-out; /* 过渡时长调0.4秒更自然，别用4秒这么久 */
  /* 加些基础样式让购物车看得清 */
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 16px;
  width: 320px;
}

.cartBtn:hover .cart {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* hover时让购物车能响应鼠标 */
}

第二步：确保结构正确 #

保证购物车是按钮的子元素，这样按钮hover时才能触发购物车的样式变化：

<button className={styled.cartBtn}>
  <h3>Cart</h3>
  <div className={styled.cart}>
    <Cart />
  </div>
</button>

要是必须留间隙怎么办？ #

如果购物车和按钮之间一定要有空隙，给购物车加个透明的伪元素，把空隙区域盖住，这样鼠标移过去的时候不会离开按钮的hover范围：

.cart::before {
  content: '';
  position: absolute;
  top: -10px; /* 这个值等于间隙的高度 */
  left: 0;
  right: 0;
  height: 10px;
}

改完之后，过渡动画能正常跑，鼠标也能顺畅从按钮移到购物车了。

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