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の状態を変更できます.Reference
この問題について(TIL 202111106[9952日目航行]), 我々は、より多くの情報をここで見つけました https://velog.io/@arong/TIL-20211106-항해99-52일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol