LINUX.ORG.RU

CSS показать блок по нажатию на другой блок, оба обёрнуты

 , ,


0

1

Здравствуйте! Кодирую мобильное меню на HTML5 + Css3.

Вложенный блок должен влиять на внешний блок, находящийся в другом месте вложения. То есть при нажатии на div.opener должен открываться div#kuku.

Сейчас работает только по нажатию на div#apply, который не имеет вложений по отношению к #kuku.

Но из вложенного div.opener не получается влиять на внешний блок: http://jsfiddle.net/znavko/gLmsecp8/

Использовался атрибут tabindex, чтобы div реагировал на селектор :focus, первая строка «открыть куку» работает.

А обёрнутый div.opener в состоянии :focus не меняет свойств наружного div#kuku, который тоже обёрнут. Что делать?

PS: js не предлагать.

★★

Вложенный блок должен влиять на внешний блок, находящийся в другом месте вложения.
PS: js не предлагать.

ну тогда никак, css не предназначен для программирования логики

Кодирую

верстаю, а не кодирую - кодируют алкоголиков

Noob_Linux ★★★★
()

Магия: http://jsfiddle.net/prz20jva/

Тебе понадобятся id для каждого из таких невидимых чекбоксов.

P.S. Рекомендую не вешать стили на #id (по возможности), лучше поставь какой-нибудь класс. id для скриптов, и кто знает какими они будут завтра. Да и реюзать их нельзя. В общем, одно неудобноство.

anonymous
()
Ответ на: комментарий от anonymous

По стандарту (пока) нельзя. Но работает, да.

anonymous
()
Ответ на: комментарий от anonymous

есть ли способ изменить стиль label.opener, когда input.magic-checkbox выбран (checked)? если label находится на одном уровне или ниже по тексту html, то да, а если он выше и вложен в div, то не работает селектор .magic-checkbox:checked+label {background:khaki;}

znavko ★★
() автор топика

Видя такие вопросы не могу удержаться от вопроса - вы дебилы доки к css, написанные для аутистов-микроцефалов, не в состоянии прочитать?

anonymous
()
Ответ на: комментарий от znavko

Ты можешь вынести чекбокс на самый верх в body и упарываться как угодно. Правда писать придётся чуть длиннее. В духе:

.check-XXX:checked ~ .класс_родителя_цели_на_этой_же_ветке .XXX

Ну или вообще

.check-XXX:checked ~ * .XXX

если тебя звёздочка не напрягает.

anonymous
()
Ответ на: комментарий от anonymous

Мало что-ли в мире аутистов, умножающих в уме семизначные числа - такие в цирке выступают.

Turbid ★★★★★
()
Последнее исправление: Turbid (всего исправлений: 1)
Ответ на: комментарий от znavko

на данный момент сделано так https://jsfiddle.net/znavko/cruktpb5/

Меню открывается по нажатию на блок, расположенный в непосредственной близости к меню, на одном уровне. При клике по пунктам меню оно не закрывается. Меню закрывается только при клике по любому другому месту. Так логично.

В Вашем варианте кнопка открывает меню, и только эта же копка закрывает, но невозможно изменить стиль кнопки (например, поменять фоновую картинку на крестик).

znavko ★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.