Change color when hover over element - html

Question

How can you change the color of the arrow when you hover over it with a mouse?
Please refer to the code snippet I have tried to achieve this (BTW the 55.5 etc percentage is intentional), where am I going wrong?
.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;
}
}
Any help is greatly appreciated.

Answer 1

body {
background-color: black
}
.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::after {
border-right: 4px solid white;
border-bottom: 4px solid white;
}
#-webkit-keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
#keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
<div class="arrow-down">
</div>
notice that arrow colors are set ::after not on .arrow-down
you need to change these css styles
border-right: 4px solid rgba(255, 255, 255, 0.5);
border-bottom: 4px solid rgb(255, 255, 255, 0.5);
try this
.arrow-down:hover::after {
border-right: 4px solid white;
border-bottom: 4px solid white;
}