Блог

Главная - Вопросы по программированию - Проблема с наведением ссылки на значок внутри списка

Проблема с наведением ссылки на значок внутри списка

#html #css #hover #icons

#HTML #css #наведите #Значки

Вопрос:

впервые публикую вопрос здесь, надеюсь, кто-нибудь сможет помочь! Я хочу создать список значков / ссылок социальных сетей

     <div class="social-links">
    <ul>
      <li class="m-link">
        <a href=""><i class="far fa-envelope"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="fab fa-linkedin-in"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="far fa-address-card"></i></a>
      </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;
}

Моя проблема в том, что таким образом цвет наведения не применяется к значку / ссылке, я попытался добавить дополнительное наведение только для «.m-link a» вот так..

 .m-link a:hover {
  color: #0b0a08;
}

но таким образом цвет применяется только тогда, когда мой курсор находится на ссылке, а не при наведении курсора на элемент списка.
Все еще новичок здесь, кто-нибудь, помогите, пожалуйста, пожалуйста!!

Ответ №1:

Вам нужно настроить таргетинг на элемент внутри элемента при наведении, например

 .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">
        <a href=""><i class="far fa-envelope"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="fab fa-linkedin-in"></i></a>
      </li>
      <li class="m-link">
        <a href=""><i class="far fa-address-card"></i></a>
      </li>
    </ul>
  </div>

Комментарии:

1. Не сработало, чувак, вот так эффект применяется только к ссылке, а не ко всему элементу, как вы можете видеть, я пытаюсь создать круглую кнопку вокруг значка, я хотел бы иметь возможность запускать эффект независимо от того, где находится курсор (на элементе «li»или на значок)

2. хорошо, какой эффект вы хотите? b / c прямо сейчас он запускается при наведении курсора мыши на класс .m-link, который выше вашего тега a, так что да, он запускается при наведении курсора мыши в любом месте тега a прямо сейчас. Но я понимаю, что вы хотите другого эффекта? У вас есть пример, где я могу его увидеть?