Challenge
Here, in my codesandbox project, I created a hover animation for a div element. When I implemented the code on a li element in my next.js project, the hover effect is triggered not on hover, but on click. Additionally, the element remains in the hovering state until clicked again. Strange, right?
Check out this video I recorded for reference --> https://www.youtube.com/watch?v=IV7PIvmpzX8
Can you identify what might be causing this issue?
Here is the relevant code snippet:
import Link from "next/link";
import styled from "styled-components";
console.clear();
const StyledUl = styled.ul`
display: grid;
grid-template-columns: 1fr;
gap: 30px;
padding: 0px 50px;
`;
const StyledLi = styled.li`
display: grid;
place-items: center;
height: 80px;
position: relative;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
border-radius: 20px;
transition: all 0.1s ease-in-out;
&:hover {
transform: scale(1.1);
}
&:hover::after {
opacity: 1;
}
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-radius: 20px;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
`;
const StyledP = styled.p`
font-size: var(--fontsize_pageText);
`;
export default function Main() {
return (
<StyledUl>
<StyledLi>
<StyledP>something</StyledP>
</StyledLi>
<StyledLi>
<StyledP>something</StyledP>
</StyledLi>
<StyledLi>
<StyledP>something</StyledP>
</StyledLi>
<StyledLi>
<StyledP>something</StyledP>
</StyledLi>
</StyledUl>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>