Onboarding task card behavior on hover #1169
Conversation
rinagobo
commented
Jun 5, 2023
rinagobo
commented
- Added &.hovered to the style of OnboardingCardContainer in StyledOnboardingCard.js
- Created highlight function for OnboardingCard component when it's hovered
|
| return ( | ||
| <OnboardingCardContainer completed = {completed}> | ||
| <OnboardingCardContainer completed = {completed} className={isActive ? 'hovered' : ''} onMouseEnter={detectHover} onMouseLeave={detectHover}> |
There was a problem hiding this comment.
For a hover effect, you don't need to actually create the functionality to know whether someone has hovered over an html element/tag. There is a CSS selector you can use to easily do this. have a look at this to see how: https://www.w3schools.com/cssref/sel_hover.php
| @@ -62,6 +62,10 @@ export const OnboardingCardContainer = styled.div` | |||
| background: ${props => props.completed ? '#E2E2E2' : 'white'}; | |||
| box-shadow: ${props => props.completed ? '' : '0px 10px 18px 10px rgba(127, 126, 127, 0.25)'}; | |||
| margin-bottom: 15px; | |||
|
|
|||
| &.hovered { | |||
There was a problem hiding this comment.
Use CSS psuedo selector instead, i've already pasted a link on another comment here
There was a problem hiding this comment.
Modified code using css hover selector.
| @@ -12,8 +12,12 @@ export default function OnboardingCard({ | |||
| subtitle, | |||
| completed, | |||
| }) { | |||
| const [isActive, setIsActive] = useState(false); | |||
There was a problem hiding this comment.
you can remove this logic once CSS applied
| @@ -12,8 +12,12 @@ export default function OnboardingCard({ | |||
| subtitle, | |||
| completed, | |||
| }) { | |||
| const [isActive, setIsActive] = useState(false); | |||
| const detectHover = event => { | |||
