Какой самый простой способ реализовать чистый CSS показать / скрыть? - PullRequest
Новая
       5

Какой самый простой способ реализовать чистый CSS показать / скрыть?

7 голосов
/ 31 мая 2011

Я обнаружил элемент <details> для html5, и это заставило меня захотеть определить, возможно ли реализовать простое и многоразовое отображение / скрытие только с помощью css.

В прошлом я создал механизм показа / скрытия для отображения и скрытия содержимого, назначив двум элементам относительное позиционирование и один отрицательный z-индекс, а затем уменьшив z-индекс переднего элемента при наведении (и увеличение z-индекса заднего элемента при наведении).

Однако этот метод работает только для элементов, находящихся в одном месте.Существуют ли другие методы для имитации отображения / скрытия на неперекрывающихся элементах?например, заголовок, который приводит к отображению фрагмента описательного текста.

Тривиальный пример кода, к которому я хотел бы применить отображение / скрыть: 

<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>

И да, язнаю, что JQuery существует.

Ответы [ 4 ]

5 голосов
/ 31 мая 2011

существует множество опций, основанных на структуре ( для современных браузеров ).

Посмотрите на

  1. selector + selector соседний селектор брата
  2. selector ~ selector общий селектор брата
  3. selector selector селектор потомков
  4. selector > selector селектор дочерних элементов

Их можно комбинировать с классы / идентификаторы / псевдо-селекторы как :hover и т. д., и создать большой список параметров.

вот небольшая демонстрация, которую я сделалчтобы продемонстрировать их: http://jsfiddle.net/gaby/8v9Yz/

3 голосов
/ 14 февраля 2013

Попробуйте использовать вложенные элементы div и цели. Я не гуру CSS, поэтому с этим могут быть разные недостатки, но, похоже, это работает.

http://jsfiddle.net/NmdxC/6/

#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }
0 голосов
/ 31 мая 2011

Первое, что приходит на ум, это что-то вроде: 

<a class="blah" href="#">Hello<span>Test</span></a>


a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}
0 голосов
/ 31 мая 2011

CSS без точного кода трудно визуализировать, но что не так с изменением объявлений display или visibility, свисающих с :hover? 

a #myelement{display:none;}
a:hover #myelement{display:block;}

Я, вероятно, неправильно понял вопрос ... хотите добавить код?

...