如何使用反应将鼠标悬停在框上时显示按钮？

Question

我正在做一个项目，它是一个反应中的在线商店。我想让 "Quick view" 和 "Add to cart" 按钮只有在将鼠标悬停在它们所在的产品框上时才可见。此外，它们应该是可点击的。下面的 ProductBox 代码`

const ProductBox = ({ name, price, promo, stars }) => (
  <div className={styles.root}>
    <div className={styles.photo}>
      {promo && <div className={styles.sale}>{promo}</div>}
      <div className={styles.buttons}>
        <Button variant='small'>Quick View</Button>
        <Button variant='small'>
          <FontAwesomeIcon icon={faShoppingBasket}></FontAwesomeIcon> ADD TO CART
        </Button>
      </div>
    </div>
    <div className={styles.content}>
      <h5>{name}</h5>
      <div className={styles.stars}>
        {[1, 2, 3, 4, 5].map(i => (
          <a key={i} href='#'>
            {i <= stars ? (
              <FontAwesomeIcon icon={faStar}>{i} stars</FontAwesomeIcon>
            ) : (
              <FontAwesomeIcon icon={farStar}>{i} stars</FontAwesomeIcon>
            )}
          </a>
        ))}
      </div>
    </div>
    <div className={styles.line}></div>
    <div className={styles.actions}>
      <div className={styles.outlines}>
        <Button variant='outline'>
          <FontAwesomeIcon icon={faHeart}>Favorite</FontAwesomeIcon>
        </Button>
        <Button variant='outline'>
          <FontAwesomeIcon icon={faExchangeAlt}>Add to compare</FontAwesomeIcon>
        </Button>
      </div>
      <div className={styles.price}>
        <Button noHover variant='small'>
          $ {price}
        </Button>
      </div>
    </div>
  </div>
);

Answer 1

编辑：制作了一个 codesandbox 以使其更容易 https://codesandbox.io/s/stckovw-hideshow-hs3mh

可以通过以下步骤实现此目的：

将 onMouseEnter 和 onMouseLeave 处理程序添加到要触发按钮呈现的组件，因此在您的情况下是 ProductBox
将按钮的默认 class 设为 display = none
例如当触发事件处理程序时将显示切换为块。

如果您要为实施保留无状态组件：

const [display, setDisplay]=useState('notdisplayed');，不显示默认class，显示=none
<div className={display}> 在你想要的组件上 hide/show
在onMouseEnter和onMouseLeave定义中调用setDisplay

Answer 2

请关注以下代码：

import React, {useState} from "react";

export default function ShowButtonHover() {
    const [style, setStyle] = useState({display: 'none'});

    return (
        <div className="App">
            <h2>Hidden Button in the box. Move mouse in the box</h2>
            <div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}}
                 onMouseEnter={e => {
                     setStyle({display: 'block'});
                 }}
                 onMouseLeave={e => {
                     setStyle({display: 'none'})
                 }}
            >
                <button style={style}>Click</button>
            </div>
        </div>
    );
}

如何使用反应将鼠标悬停在框上时显示按钮？

How to show button while hover over box using react?

reactjs

hover

mouseevent