时间戳

首页 > 解决方案 > Material UI：在父元素悬停时显示子元素

reactjs - Material UI：在父元素悬停时显示子元素

问题描述

当用户将鼠标悬停在一个Card组件上时，我想在该组件上显示一个不可见的按钮。在 CSS 中，我会做这样的事情：

.card:hover my-button {
  display: block;
}

如何以“Material-UI”方式复制它？

到目前为止，我发现的所有 Material-UI 技巧都建议使用类似的方法来添加悬停样式，但这会将样式应用于悬停在的组件而不是其他组件。

  '&:hover': {
    background: 'blue'
  }

标签： reactjsmaterial-ui

解决方案

它不是特定于 Material UI 的，而是特定于反应的东西。您需要一个状态变量来显示/隐藏您的按钮。

const App = () => {
  const [show, setShow] = useState(false);
  return (
    <Card
      onMouseOver={() => setShow(true)}
      onMouseOut={() => setShow(false)}>
      <CardBody>
        // some content
        {show && <Button>Click</Button>}
      </CardBody>
    </Card>
  );

}

推荐阅读