Псевдокласс :hover

[dnnsus]

Всем добрый день! В общем, у меня при наведении на элемент списка, появляется скрытый элемент - другой список, через псевдокласс :hover, но при отводе курсора элемент естественно снова скрывается. Подскажите, пожалуйста, возможно ли через css без js реализовать так, что бы скрытый элемент не исчезал при отводе курсора. То есть показался и остался на месте, а скрылся только при наведении на другой элемент. Спасибо.

Edited January 27, 2016 by dnnsus

[ShumNo]

Не думаю.

[dnnsus]

Не думаю.

Таки без js не обойтись?

[abrahadabra]

если б клик, то ещё можно было бы, но по наведению нет.

[Igor Schnaider]

Ради эксперимента можно конечно что-нибудь придумать, но на практике я бы так делать не стал.

[ShumNo]

Ну правильно это всю страницу надо закатать в элемент у которого hover и при наведении на смежный элемент убирать этот ховер.
Но это задача не оформления на 200%.

 

Одним словом гвозди палкой не заколачивают

[dnnsus]

Ради эксперимента можно конечно что-нибудь придумать, но на практике я бы так делать не стал.

в общем, не стал испытывать судьбу и все таки сделал js https://jsfiddle.net/5hh7y0xn/1/

вроде бы работает как надо)

 

Ну правильно это всю страницу надо закатать в элемент у которого hover и при наведении на смежный элемент убирать этот ховер.

Но это задача не оформления на 200%.

 

Одним словом гвозди палкой не заколачивают

И то верно

Всем спасибо за помощь!

[Igor Schnaider]

в общем, не стал испытывать судьбу и все таки сделал js

И правильно. Такое только на JS. (На самом деле, мне самому лишь стало интересно попробовать на CSS придумать что-нибудь. А побочный эффект у такого решения, конечно, непозволительный.)

[dnnsus]

 

в общем, не стал испытывать судьбу и все таки сделал js

И правильно. Такое только на JS. (На самом деле, мне самому лишь стало интересно попробовать на CSS придумать что-нибудь. А побочный эффект у такого решения, конечно, непозволительный.)

 

Ну пока не попробуешь, толком не узнаешь) Только потом результат может не оправдать надежд, а ведь стоило всего 10 минут уделить js) Еще раз спасибо!

[Mixail.09]

если б клик, то ещё можно было бы, но по наведению нет.

А по клику как это можно реализовать?

[abrahadabra]

ключевое слово :target

[Igor Schnaider]

ключевое слово :target

 

Мне кажется, что лучше через элементы формы. С :target как закрывать-то.

[andrey7287]

Не вник в суть побочных эффектов, но на css всё это нормально делается

 

http://jemand.ru/examples/gorizontalnoe-vypadayushhee-menyu-na-css.html

[Igor Schnaider]

Не вник в суть побочных эффектов, но на css всё это нормально делается

 

http://jemand.ru/examples/gorizontalnoe-vypadayushhee-menyu-na-css.html

 

Так нужно чтобы меню не закрывалось, пока на другой элемент не наведешь :-)

[andrey7287]

То есть ?  Оно и так не закрывается.  

[Mixail.09]

Спасибо.

ключевое слово :target

Буду ковырять :target

 

 

ключевое слово :target

 

Мне кажется, что лучше через элементы формы. С :target как закрывать-то.

 

С формами пока тяжко, даже не представляю как через формы такое делать

[ishurgaya]

Есть еще слайдеры без js : http://css-live.ru/tricks/slajder-na-css3-bez-js-podstraivayushhijsya-pod-razreshenie.html

 

Упрощенно принцип работы показан здесь: https://jsfiddle.net/pj8byr3w/

 

Нажатой радио кнопке присваивается :checked.

 

ну и дальше дело дизайна , замаскировать красиво кнопочки.

[Mixail.09]

Ребят извиняюсь что я тут с "таргетом" прикопался, но что то до конца ни как не пойму его св-ва, а именно:

- почему в 26 строке если у меня разкоментить z-index все перестает работать, как то с моей логикой не вяжется ведь по идее у обоих блоков z-index: 1; стоит , а когда срабатывает "таргет" z-index: одного из блоков меняется на 2 и соответственно он получается сверху, но что то на практике как то все не так)

и если не сложно еще подскажите окуда разрыв между раздел 1 и раздел 2

http://codepen.io/anon/pen/dGjqqK

[parliament]

Не вник в суть побочных эффектов, но на css всё это нормально делается

 

http://jemand.ru/examples/gorizontalnoe-vypadayushhee-menyu-na-css.html

Тут же скрипт вроде

[andrey7287]

Тут же скрипт вроде

нет, только css, вот гайд

http://jemand.ru/gorizontalnoe-vypadayushhee-menyu-na-css/