@ilyaMihalych

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

Всем привет! Столкнулся с проблемой,нужно при наведении на 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>
  • Вопрос задан
  • 96 просмотров
Решения вопроса 2
Stalker_RED
@Stalker_RED
Без скриптов никак. Но можно поставить logo последним, а потом стилями перенести куда надо.
Ответ написан
Комментировать
@ilyaMihalych Автор вопроса
так как в 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>

Всем огромное спасибо!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
lavezzi1
@lavezzi1
Подпишись на событие mouseover на nav: https://jsfiddle.net/wxvd4Lg6/
Ответ написан
dimovich85
@dimovich85 Куратор тега CSS
https://u-academy.net/
Никак, следующий элемент можно достать с помощью + или ~, а вот предыдущий никак, только js)
$('.item').on('mouseover', function(){
$(this).prev('logo').css({
color: red;
//.... и так далее.
};)
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы