Можно ли при наведении на один элемент анимировать другой с помощью :hover?

Question

[Иван Ефимов]

Ситуация:
Один родительский блок и два дочерних, которые соседи относительно друг друга.
Задача:
Анимировать второй дочерний блок по наведению на элемент первого.
Подробнее:
В первом блоке есть "стрелка", по наведению на неё разворачивается "текстовый элемент" во втором.
Можно ли сделать это с помощью :hover css? Мои знания говорят "нет". Возможно я что-то пропустил.
Спасибо.

Comments

[Иван Ефимов]

код на хостинге
Доберитесь до блока ".a30"

main .s01 .slider .a30 img:hover {
  cursor: pointer;
}
main .s01 .slider .a30 img:hover .a32 {
  max-height: 32.0rem;
  transition: max-height 1s linear 0.5s;
}

Такой код естественно не работает, потому что в контексте тега "img", за которым закреплен ":hover", никакого ".a32" не имеется.

Answer 1

[Theory Theory]

Comments

[Иван Ефимов]

Мне в целом понравился ваш подход. Теперь размышляю: можно ли это приспособить к моему коду :)
upg: да, получилось, работает и у меня тоже. Спасибо.

Answer 2

[Antony Bark]

Стандартый ход:
используем свойство CSS "сосед"
.foo1 + .foo2

следует помнить, что соседство действует только в сторону "следующего ЗА", т.е. нельзя обратиться к соседу, "идущему ДО". В примере можем достать только до .foo2, а до .foo1 можно достать другими средствами, например, через родителя: .parent > *[class^="foo"]:first-child, но не через соседство +

Comments

[Иван Ефимов]

Благодарю, но такое решение видится мне менее универсальным, нежели уже принятое.