Problem hovering a icon link inside a list

Question

first time posting a question here, hope someone can help! I want to create a list of social media icon/links

  .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!!

user_11135092 · Answer

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;
}

Problem hovering a icon link inside a list

1 Answers