Как при наведении анимировать элемент, который в структуре находится выше?

Question

Как средствами CSS сделать так, чтобы при наведении на кнопку, менять стили для иконки?

HTML:

<div class="item">
    <div><i class="icon"></i></div>
    <h3>Some title</h3>
    <p>Some description</p>
    <a class="btn">Click on me!</a>
</div>

CSS:

.btn:hover {
    background-color: skyblue;
}
/* И возможно ли это вообще? */
.btn:hover ? .icon {
    color: skyblue;
}

Answer 1

В общем, да, средствами CSS обратиться к вышестоящему элементу нельзя. Однако можно воспользоваться полезным свойством order при display: flex при помощи которого можно визуально изменить порядок отображения элементов. Таким образом, в структуре иконка находится ниже и к ней можно обратиться при помощи операторов + или ~, но на странице показывается в самом верху. Такие дела. Может, кому пригодится.

.item {
  display: flex;
  flex-direction: column;
  width: max-content;
  padding: 1rem;
  background: whitesmoke;
}
.icon-wrapper {
  order: -1;
  margin-bottom: 1rem;
  transition: 0.3s;
}
.icon::before {
  content: "\2764";
  font-style: normal;
}
h3 {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.btn {
  border: 1px solid skyblue;
  padding: 0.5rem 1rem;
  transition: 0.3s;
}
.btn:hover {
  color: white;
  background: skyblue;
}
.btn:hover + .icon-wrapper {
  color: skyblue;
}

<div class="item">
  <h3>Some title</h3>
  <p>Some description</p>
  <a href="#" class="btn">Click on me!</a>
  <div class="icon-wrapper"><i class="icon"></i></div>
</div>

БЛОГ НА HUSL

Как при наведении анимировать элемент, который в структуре находится выше?

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