Problem hovering a icon link inside a list - html

Question

first time posting a question here, hope someone can help!
I want to create a list of social media icon/links
<div class="social-links">
<ul>
<li class="m-link">
<i class="far fa-envelope"></i>
</li>
<li class="m-link">
<i class="fab fa-linkedin-in"></i>
</li>
<li class="m-link">
<i class="far fa-address-card"></i>
</li>
</ul>
</div>
.m-link {
width: 2em;
height: 2em;
text-align: center;
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 2.5em;
line-height: 2em;
color: #e2e2e2;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.m-link:hover {
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
text-decoration: none;
color: #e2e2e2;
}
My problem is that in this way the hover color doesn't apply on the icon/link, I tried to add an extra hover just for the ".m-link a" like so..
.m-link a:hover {
color: #0b0a08;
}
but in this way the color apply only when my cursor is on the link and not when I hover on the list element.
Still a beginner here, someone help pleaseeee!!

Answer 1

You need to target the element inside the element on hover, like this
.m-link:hover a > i { /* 'on hover on .m-link class element, then i inside a will take this css code */
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link {
width: 2em;
height: 2em;
text-align: center;
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 2.5em;
line-height: 2em;
color: #e2e2e2;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.m-link:hover a > i {
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
text-decoration: none;
color: #e2e2e2;
}
<script src="https://kit.fontawesome.com/9114d9acc8.js" crossorigin="anonymous"></script>
<div class="social-links">
<ul>
<li class="m-link">
<i class="far fa-envelope"></i>
</li>
<li class="m-link">
<i class="fab fa-linkedin-in"></i>
</li>
<li class="m-link">
<i class="far fa-address-card"></i>
</li>
</ul>
</div>