Показать и скрыть различные элементы в фокусе ⇐ Html

[Anonymous]

Я исследовал некоторые способы отображения и скрытия элементов HTML и в итоге нашел это.
Мое намерение — использовать способ отображения и скрытия элементов без необходимости использования JavaScript, jQuery или чего-либо еще, кроме CSS и HTML, поэтому я выбрал использование атрибута «tabindex», а затем создал следующий простой пример для изучения...
HTML:

Код: Выделить всё

DIV A
[url=http://www.google.com]LINK[/url]
DIV B

CSS:

Код: Выделить всё

.hidden
{
color: red;
display: none;
}

#root:FOCUS .hidden
{
display: block;
}

Если посмотреть по коду, внутренний элемент div можно легко щелкнуть и выбрать. Однако ссылку и кнопку, к сожалению, невозможно щелкнуть или выбрать. При попытке сделать это фокус корневого элемента div теряется.
Мой вопрос очень простой. Есть ли один или несколько способов обойти/решить эту проблему без использования JavaScript, jQuery или чего-то еще? (Только CSS и HTML)
Если было неясно, мои намерения состоят в том, чтобы скрыть элементы, чтобы при их обнаружении их можно было использовать. Я хотел бы создать меню, содержащее подменю, и подменю появляются только при нажатии на родительское меню (а не при наведении на них указателя мыши).
Ах! И я должен упомянуть... Я также нашел решение, использующее флажок. К сожалению, это неосуществимо, поскольку мне не пришлось бы еще раз нажимать на элемент, чтобы он скрылся. То есть мне хотелось бы просто щелкнуть за пределами элемента, чтобы скрыть его внутренний элемент, поэтому я выбрал «tabindex».

Подробнее здесь: https://stackoverflow.com/questions/271 ... s-on-focus