当鼠标不在它们上时如何隐藏框或按钮

Posted 2023-03-15

【中文标题】当鼠标不在它们上时如何隐藏框或按钮

【英文标题】：How to Hide box or button when mouse is not on them

【发布时间】：2022-01-14 06:52:18

【问题描述】：

我正在尝试实现一种效果，即当我将鼠标放在框上时，按钮组件将显示并使框变大一点，而当鼠标移出时，按钮将不显示并且框大小得到一个大的小。

const Container = styled.div`
    flex:1;
    margin: 15px;
    min-width:  350px;
    max-width: 350px;
    height: 500px;
    background-color: none;
    z-index: 3;
    justify-content: center;
    
    position: relative;
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    border-color: grey;
    &:hover
        background-color: #a5e293;
    
`;
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
justify-content: center;
display: flex;
`;

const Product = (item:any) => 
    return (
        <Container>      
            <img src=item.imagem className='imag'/>
            <Box justifyContent='center' display='flex'>
            <Typography>
                item.nome
                
            </Typography>
            </Box>
            <Box justifyContent='center' display='flex'>
            <Typography>
                item.preco
            </Typography>
            </Box>
            <Box justifyContent='center' display='flex'>
            <Button>Comprar</Button>
                </Box>
        </Container>
    )
```

This is my code without the changes I tried, because it was pretty messy

【参考方案1】：

您可以使用条件渲染或样式来做到这一点。下面是示例，第一个带有条件渲染，第二个带有样式。

import React,  useState  from 'react'

const Container = styled.div`
  flex: 1;
  margin: 15px;
  min-width: 350px;
  max-width: 350px;
  height: 500px;
  background-color: none;
  z-index: 3;
  justify-content: center;

  position: relative;
  border-radius: 20px;
  border-style: solid;
  border-width: 2px;
  border-color: grey;
  &:hover 
    background-color: #a5e293;
  
`
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  justify-content: center;
  display: flex;
`

const Product = ( item ) => 
  const [isButtonVisible, setButtonVisible] = useState(false)

  const handleButtonToggle = () => 
    setButtonVisible(!isButtonVisible)
  

  return (
    <Container>
      <img src=item.imagem className="imag" />
      <Box justifyContent="center" display="flex">
        <Typography>item.nome</Typography>
      </Box>
      <Box justifyContent="center" display="flex">
        <Typography>item.preco</Typography>
      </Box>
      <Box
        onMouseEnter=handleButtonToggle
        onMouseLeave=handleButtonToggle
        justifyContent="center"
        display="flex"
      >
        Other components
        isButtonVisible && <Button>Comprar</Button>
      </Box>
    </Container>
  )

还有帮助样式。

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  justify-content: center;
  /* initial display: none */
  display: none;
`

const StyledBox = styled(Box)`
  :hover $Button 
    display: flex;
  
`