Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve the issue. Below are my code snippets, thank you to all experienced developers for your help.
.leftButton {
margin-top: 290px;
border: none;
outline: 0;
padding: 0;
height: 36px;
width: 36px;
transition: 3s;
border-radius: 50%;
background-color: #314561;
color: #fff;
position: absolute;
top: 50%;
//z-index: 10;
transform: translateY(-50%);
text-align: center;
font-size: 12px;
cursor: pointer;
display: none;
&:hover {
display: block;
}
}
render() {
return <button className={styles.leftButton>
}
Interestingly, I came across a suggestion to use label wrapping, however, even after attempting it, the issue persists.
.father {
cursor: pointer;
}
.leftButton:hover .father {
cursor: pointer;
display: block;
}
return(
<div className={styles.father}>
<button className={styles.leftButton} />
</div>);