Is there a way to modify the color of the arrow when hovering over it with a mouse?
I have included the code snippet I used in an attempt to accomplish this. Can you spot where I may be making a mistake (By the way, the 55.5% percentage is intentional)?
.arrow-down {
width: 100%;
margin: 0 auto;
left: 55,5%;
}
.arrow-down::after {
content: "";
width: 50px;
height: 50px;
position: absolute;
margin: auto;
border-right: 4px solid rgba(255, 255, 255, 0.5);
border-bottom: 4px solid rgb(255, 255, 255, 0.5);
-webkit-transform: rotate(40deg);
transform: rotate(45deg);
-webkit-animation: 3s arrow infinite ease;
animation: 3s arrow infinite ease;
left: 48.25vw;
bottom: -15vw;
}
.arrow-down:hover {
color:white;
}
@-webkit-keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
@keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
Your assistance would be greatly valued.