TIL 202111106[9952日目航行]


ページの背面にあるマウスのアイコンを表示

  // onMouse
  const [display, setDisplay] = React.useState({ display: 'none' });
  
  return (
  <Div
     // onMouse
     onMouseEnter={() => {
     setDisplay({ display: 'block' });
      }}
     onMouseLeave={() => {
     setDisplay({ display: 'none' });
      }}
      >
        <ProjectDiv>
          <Grid is_flex>
            <TitleText>{cardList[cardId].title}</TitleText>
            <IconDiv className="iconDiv">
              <EditBtn
                onClick={editCardBack}
                cursor="pointer"
                className="editBtn"
              />
              <DeleteBtn
                onClick={deleteCardBack}
                cursor="pointer"
                className="deleteBtn"
              />
            </IconDiv>
          </Grid> )
          ...생략...
  
  const IconDiv = styled.div`
  display: none;
  justify-content: space-around;
  margin-right: 32px;
`;
onMouseEnter()イベントとonMouseLeave()イベントにより、マウスがdiv領域にある場合と領域にない場合、useStateを使用してdisplayの状態を変更できます.