Как при наведении на один элемент сделать изменение второго?

Question

Нужно изменить цвет features_icon при наведении курсора на features_link. Искал до этого ответы, но ни один не помог. Возможно ли это реализовать только на CSS?

Код:

.features_element {
    margin-top: 140px;
}

.features_link {
    color: #9fa9a9;
    text-decoration: none;
    font-weight: 400;
    font-size: 20px;

}


.features_icon {
    margin-top: 140px;
    color: #9fa9a9;
    margin-right: 45px;
    font-size: 48px;

}

<ul class="features_list">
                <li features_element><i class="far fa-heart fa-fw features_icon"></i><a href ="#" class = "features_link">features</a></li>
                <li features_element><i class="fas fa-briefcase fa-fw features_icon"></i><a href ="#" class = "features_link">features</a></li>
                <li features_element><i class="fas fa-leaf fa-fw features_icon"></i><a href ="#" class = "features_link">features</a></li>
                <li features_element><i class="fas fa-thumbtack fa-fw features_icon"></i><a href ="#" class = "features_link">features</a></li>
                <li features_element><i class="fas fa-umbrella fa-fw features_icon"></i><a href ="#" class = "features_link">features</a></li>
</ul>

Answer 1

В данном виде, на CSS - невозможно.
Можно поменять местами теги <i> и <a>, прописать стили так, чтобы они выглядели по прежнему:

.features_element {
  position: relative;
  list-style: none;
}

.features_link {
  margin-left: 24px; /* В размере иконки, освободить ей место. */
  
  color: #9fa9a9;
  text-decoration: none;
  font-weight: 400;
  font-size: 20px;
}

.features_icon {
  position: absolute;
  left: 0;
  top: 0;
  /* Отправить иконку налево, где была изначально */
  
  width: 20px;
  height: 20px;
  background: #ddd;
}

.features_link:hover + .features_icon {
  background: #f80;
}

<ul class="features_list">
  <li class="features_element">
    <a class="features_link" href="#">features</a>
    <i class="features_icon"></i>
  </li>
  <li class="features_element">
    <a class="features_link" href="#">features</a>
    <i class="features_icon"></i>
  </li>
  <li class="features_element">
    <a class="features_link" href="#">features</a>
    <i class="features_icon"></i>
  </li>
</ul>

Если HTML нельзя изменить, делается через JS (mouseenter, mouseleave)

UPD: Если у <li> нет стилей, можно не меняя HTML, через position: absolute; left: -20; выкинуть иконку за пределы li, внутри тега визуально останется только ссылка:

.features_list {
  display: inline-flex;
  flex-direction: column;
}

.features_element {
  position: relative;
  display: inline-block;
  
  list-style: none;
}

.features_link {
  color: #9fa9a9;
  text-decoration: none;
  font-weight: 400;
  font-size: 20px;
}

.features_icon {
  position: absolute;
  left: -24px;
  top: 0;
  
  width: 20px;
  height: 20px;
  background: #ddd;
}

.features_element:hover .features_icon {
  background: #f80;
}

.features_element .features_icon:hover {  
  background: #ddd;
  /* Перебить предыдущий селектор при наведении на саму иконку */
}

<ul class="features_list">
  <li class="features_element">
    <i class="features_icon"></i>
    <a class="features_link" href="#">features</a>
  </li>
  <li class="features_element">
    <i class="features_icon"></i>
    <a class="features_link" href="#">features</a>
  </li>
  <li class="features_element">
    <i class="features_icon"></i>
    <a class="features_link" href="#">features</a>
  </li>
</ul>

БЛОГ НА HUSL

Как при наведении на один элемент сделать изменение второго?

Ответы (1 шт):