Как грамотно написать hover в данном случае?

Question

[Максим]

Добрейший вечерочек.
Помогите плз.
Наверняка решение крайне простое, но пока не додумался какое.
Ситуация такая.

Нужно что бы было так:
при наведении на блок 1 или на блок 2, блок 2 плавно поднимается вверх.

Проблема:
ели навести курсор на блок 2, этот блок 2 поднимается вверх как и нужно, но если курсор хоть чуток сдвинуть после этого куда угодно, блок едет обратно, а нужно что бы оставался пока что наверху.

Понятно, что это поведение логично, но вот, надо как-то сделать так как надо)
Если у вас возник вопрос
-А когда тогда блок 2 должен съезжать обратно?

Отвечу так:
-Обратно тогда когда юзер наводит на блок 3 или 4 или 5 или 6. Смысл такой.

Спасибо большое! :)

Answer 1

[Ден Тоцкий]

Без js и смс codepen.io/anon/pen/gwZJpR?editors=1100

Comments

[Максим]

Очень круто)
Спасибо большое!

Answer 2

[KurtsKhalia]

codepen.io/anon/pen/vXjBPp
Обычно примерно так делаю. Решение кажется грамотным, так как читается всеми браузерами и не требует жабускрипт.

Comments

[Максим]

Очень круто! Интересное решение. Спасибо! :)

Answer 3

[Савелий Дзвонкевич]

на jquery при наведении на блок 1 или 2, присваиваешь им класс (такой же как при :hover), а затем когда мышка попадает на другие элементы, класс автоматически убирается

Comments

[Максим]

Спасибо большое! :)

Answer 4

[GeekFromUa]

Ну можно на jQuery добавлять класс active и так будете сохранять положения, а при ховере на другой блок удалять везде active и добавлять на текущий блок. Не уверен что можно сделать на чистом css

Comments

[Максим]

Спасибо! Скорее всего так и буду делать. :)

[GeekFromUa]

Максим: codepen.io/anon/pen/NRYVqY

[Максим]

Очень благодарен :)

Answer 5

[Юрий Олиярнык]

Это не то что ты хочешь, но попрубуй так, возможно подойдёт.

codepen.io/anon/pen/KgoLzG

Comments

[Максим]

О, тоже интересное решение и без js :) Спасибо!

Answer 6

[DTX]

Без JS - никак.

Comments

[Максим]

Спасибо! Надеялся что можно на CSS как-то) Ну раз нет, так нет)

[DTX]

Максим: можно прозрачную подложку сделать под эти два блока. И ловить ховер на неё. Тогда можно CSS обойтись

[Максим]

Ооо! Звучит интересно! Попробую скоро! Спасибо!