@agatha-sbSubmitted about 3 years ago
Latest solutions
Latest comments
- @gusfocaPosted about 3 years ago
You can also use the css filter property and change the icon's brightness:
.icon:hover { filter: brightness(8); }
Or directly change the color with this set of functions:
.footer-logo { filter: brightness(0.3) sepia(1) hue-rotate(120deg) saturate(6); }
Which changes the logo's color through filter instead of setting the background color.
Marked as helpful1 - @AchrefFastSubmitted over 3 years ago@gusfocaPosted over 3 years ago
I noticed you're updating the cards' contents after the DOM gets changed. Maybe that's causing more css repaints/reflows (just google those terms). You may also try using XMLHttpRequest instead of fetch, but just look at this solution (it's not mine): https://www.frontendmentor.io/solutions/time-tracking-dashboard-NkKJ4xnzC. It inserts a template html with "container.insertAdjacentHTML" (line 23). But you'll see the lag in that solution and others, don't know if it is solvable (my solution doesn't build the html, has it already in place and it sometimes lag, too: https://github.com/gusfoca/time-tracking-dashboard-main).
1
