Убер-селектор

Общее
1

Подскажите пожалуйста, нет ли такого селектора, к которому можно прицепить :hover, но эффект срабатывался на другом.

Например:

div class=“container”>
div class=“block1”> /div> На блок 1 повесили :hover
div class=“block2”> /div>
/div>

Суть в том, чтобы в тот момент, когда курсор попадает на блок 1, эффект (например смена цвета фона)
срабатывал на блок 2.

*без участия JS, я его пока не изучал, так что интересно было бы придумать способ на HTML / CSS…

Такие вот пироги, можете что нибудь подсказать интересное?)

2

.block1:hover ~ block2 {}

1 лайк
3

хотя сейчас поняла, что такое работало для комбинации input:cheked ~ .item и то, что я написала выше, может быть нерабочей отсебятиной

4

а нет, проверила, все работает :slight_smile:

5

Шикос, а то в 3 курсе про селекторы как-то поверхностно рассказывается про этот селектор с тильдой.

Испытывается только на чекбоксах, а похоже, что его можно использовать с любыми элементами)

6

тут можно не только с тильдой, можно и + (соседние селекторы) использовать

7

При данном исходном коде селектор соседа + тоже сработает, я думаю.

8

2017-01-09_20-27-51.png1698×808 62.8 KB

Я в общем примерно подошел к результату вопроса, но теперь проблема вот в чем,
не могу понять, почему не загораются предыдущие квадратики.

цель в том, чтобы при наведении на квадратик, загорались все соседние, но не он

Подскажите пожалуйста, почему так :slight_smile:

9

селекторы с ~ выбирают элементы, которые идут дальше(после) по коду - с предыдущими работать не будет

10

т.е. я правильно поняла, что нужно:

  1. состояние1 - ни на один из квадратиков не наведена мышка - у квадратиков цвет А
  2. состояние2 - какой-либо из квадратиков наведена мышка - у всех цвет В, у квадрата с мышкой- цвет С

Если так, то можно попробовать следующую схему:
используем контейнер-обертку без маржинов-падингов (если я правильно поняла, то у вас это .wrapper если нет, то добавляем такой контейнер)
для состояния1
.window {
background-color: цвет А;
}
Для состояния2 :
.wrapper:hover .window {
background-color: цвет B;
}
.wrapper:hover .window:hover{
background-color: цвет C;
}

11

Почти, суть в том, чтобы загорались только соседние.
Если все квадраты посчитать от 1 до 9, то если наведешь на первый, должны загореться 2,4 и 5.
А если например на центральный, то поскльку у него все соседние, то должны загореться все остальные.
Если навести на 9тый, то должны загореться 5,6 и 8)

Я просто проходил курс по селекторам, и придумал эту херню, пока проходил, и не могу успокоиться, пока не сделаю её. Но не получается))