Поменять стиль первого элемента в списке при наведении на другой элемент

Question

Возможно ли с помощью css сделать так? при наведении на один из элементов: text2, text3, text4 у text1 поменяется цвет на значение "wheat"

.list {
  display: flex;
}

.item {
  margin-right: 15px;
  padding: 10px;
  background: wheat;
}

.item:first-child {
  background: #ccc;
}

.item:hover {
  background: #ccc;
}

<div class="list">
  <div class="item">text1</div>
  <div class="item">text2</div>
  <div class="item">text3</div>
  <div class="item">text4</div>
</div>

Answer 1

Визуально это возможно сделать, если выстроить элементы в DOM в обратном порядке и применить flex-direction: row-reverse

.list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}

.item {
  margin-right: 15px;
  padding: 10px;
  background: wheat;
}

.item:last-child {
  background: #ccc;
}
.item:hover ~ .item:last-child {
  background: wheat;
}

<div class="list">
  <div class="item">text4</div>
  <div class="item">text3</div>
  <div class="item">text2</div>
  <div class="item">text1</div>
</div>

Answer 2

То что Вы хотите в CSS невозможно, но задачу можно решить с использованием JS. Необязательно подключать файл style.js, пропишите код внутри тега <script></script>

let sensors = document.querySelectorAll('.sens');
sensors.forEach((element) => {
    addRemoveClass(element);
});
let changeables = document.querySelectorAll('.changeable');

function addRemoveClass(element) {
    element.addEventListener('mouseover', (event) => {
        changeables.forEach((element) => {
            element.classList.add("hover-styles");
        })
    });

    element.addEventListener('mouseout', (event) => {
        changeables.forEach((element) => {
            element.classList.remove("hover-styles");
        })
    });
};

.list {
  display: flex;
}

.item {
  margin-right: 15px;
  padding: 10px;
  background: wheat;
}

.item:first-child {
  background: #ccc;
}

.item:hover {
  background: #ccc;
}

/*отслеживается наведение на элементы с этим классом*/
.sens {

}
/*метка ИЗМЕНЯЕМЫХ элементов*/
.changeable {
              
}

/*новые стили для элементов с классом "changeable"*/
.hover-styles {                     
    transition: all 0.1s linear;
    background: wheat !important;   /*указать "!important" если стили конфликтуют и не работают*/
}

      <div class="list">
         <div class="item changeable">text1</div>
         <div class="item sens">text2</div>
         <div class="item sens">text3</div>
         <div class="item sens">text4</div>
      </div>

БЛОГ НА HUSL

Поменять стиль первого элемента в списке при наведении на другой элемент

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