Как повлиять на соседний селектор?

Question

[Илья П]

Всем привет! Столкнулся с проблемой,нужно при наведении на item изменить цвет в li.logo.
Знаю как повлиять верхним селектором на нижней item-1 на item-2,
а вот как повлиять нижним на верхний item-1 на logo не могу найти.
Буду рад любому совету! Заранее спасибо!

<ul class="nav">
	<li class="logo"></li>
	<li class="item-1"></li>
	<li class="item-2"></li>
	<li class="item-3"></li>
	<li class="item-4"></li>
</ul>

Comments

[Ankhena]

Поменять их в коде в нужном вам порядке. Визуально поменять местами с помощью flex order.
Либо js.

[Модератор]

Если какой-либо ответ вам помог, отметьте его решением. Чтобы поблагодарить автора, можно нажать кнопку "Нравится".

Answer 1

[Stalker_RED]

Без скриптов никак. Но можно поставить logo последним, а потом стилями перенести куда надо.

Answer 2

[Илья П]

так как в js знаний пока маловато,сделал в css

.nav{
 display: flex;
 flex-direction: column;
}
.item-1,.item-2,.item-3,.item-4{
order:0;
}
.logo{
order:-1;
}

<ul class="nav">
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
  <li class="item-4"></li>
  <li class="logo"></li>
</ul>

Всем огромное спасибо!

Answer 3

[lavezzi1]

Подпишись на событие mouseover на nav: https://jsfiddle.net/wxvd4Lg6/

Comments

[Илья П]

огромное спасибо за код,но я наверно не совсем точно объяснил чего хочу. При клике на item, logo меняло бы свой цвет. у каждого item свой цвет. Огромное спасибо за помощь!

Answer 4

[Dima Polos]

Никак, следующий элемент можно достать с помощью + или ~, а вот предыдущий никак, только js)

$('.item').on('mouseover', function(){
$(this).prev('logo').css({
color: red;
//.... и так далее.
};)
}