Как сделать как на скрине?

Question

[olya_097]

Как сделать как на скрине?
Чтобы такое было по ховеру
и ховер тут вообще не срабатывает
Спасибо
https://codepen.io/anon/pen/PrbebX

UPD: https://codepen.io/anon/pen/RzoyYv
нужно как я понимаю чтобы ховер срабатывал не на весь контейнер
а только на ширину блока слева

и чтобы при наведение полоска была во всю высоту области просмотра
а не как сейчас

Answer 1

[Павел Романов]

Имеете в виду так?

.container:hover .section {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

Comments

[olya_097]

Павел Романов, почти
https://codepen.io/anon/pen/RzoyYv
нужно как я понимаю чтобы ховер срабатывал не на весь контейнер
а только на ширину блока слева

и чтобы при наведение полоска была во всю высоту области просмотра
а не как сейчас

подскажете, пожалуйста?

[Павел Романов]

olya_097, вот так?
https://codepen.io/anon/pen/vqyrJY

[olya_097]

Павел Романов, спасибо огромное
так

[olya_097]

Павел Романов, а если так нужно? я про структуру html
https://codepen.io/anon/pen/ZdBjpP
и чтобы это было гибко
тоесть можно спокойно добавлять на другие страницы
как сделать?

[Павел Романов]

olya_097, с такой структурой делать придется через js, одного css тут не хватит.
Может быть вам подойдет что-то вроде этого? https://codepen.io/anon/pen/ewBjrO

[olya_097]

Павел Романов, фишка в том что блок слева должен показываться по ховеру

Answer 2

[lukoie]

По вопросу вообще не понятно что именно Вам нужно.
Вот представьте что мы вообще не можем прочесть Ваши мысли на что именно нужно обратить внимание на скрине, и объясните чем этот скрин такой уникальный?

и чтобы при наведение полоска была во всю высоту области просмотра
а не как сейчас

<div class="section"> перенесите на первую строку
Да, и красить в красный надо на ховере, а не наоборот, вообще то!
так что убирайте дисплей нан в первом стиле,а во второй перенесите бекграунд колор ред.

Comments

[olya_097]

lukoie, нужно не так


а так


Вы написали
перенесите на первую строку

такк ховер вообще не срабатывает теперь

[lukoie]

olya_097,
если хотите оставить как есть у Вас, оберните это в дивку, и у нее напишите position:relative;

[lukoie]

[olya_097]

lukoie, а если так нужно? я про структуру html
https://codepen.io/anon/pen/ZdBjpP
и чтобы это было гибко
тоесть можно спокойно добавлять на другие страницы
как сделать?