Возможен ли этот трюк с показом CSS?

Рамис Кадыров

Привет, ребята,

Я экспериментирую с событием show-hide на чистом CSS, приведенный ниже код пока работает нормально (я выбрал из Интернета XD):

 


<!DOCTYPE html>


<html><head>


<meta charset="UTF-8">


<title>CSS ShowHide</title>


<style>


.box { display: none; }


.span:focus ~ .box { display: block; }


</style>


</head><body>


<ul>


<li>List 1</li>


<li>List 1</li>


<li><a href='#' class=span tabindex=0>Show</a></li>


</ul>


<div class=box>


<p>Content 1</p>


<p>Content 2</p>


<p>Content 3</p>


</div>


</body></html>

Код (разметка): Теперь я попытался изменить его в соответствии со своими потребностями, добавив элемент, который не следует сразу за элементом щелчка, и это не сработало. Вот что я пытался до сих пор:

  <!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>CSS ShowHide</title> <style> .box { display: none; } .span:focus ~ .box { display: block; } .box { position: absolute; z-index: 100; border: 1px solid #111; padding: 5px; top: 0; right: 0; } </style> </head><body> <a href='#' class=span tabindex=0>Show Me</a> <div class=box >Some alarming information here</div> </body></html>

Код (разметка): Почему это не работает? Есть ли у вас идеи, как заставить это работать? Я хочу сначала попробовать чистый CSS, прежде чем добавлять скрипт. Спасибо,

Markk1

Привет, ketting00, попробуй вот так...

 


<!DOCTYPE html>


<html>


<head>


<meta charset="utf-8">


<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1">


<title>CSS ShowHide</title>


<link rel="stylesheet" href="screen.css" media="screen">


<style media="screen">


#cb, #box {


display:none;


}


ul label:before {


content:'Show';


color:#00f;


cursor:pointer;


}


#cb:checked~ul label:before {


content:'Hide';


}


#cb:checked~#box {


display:block;


}


</style>


</head>


<body>


<input id="cb" type="checkbox">


<ul>


<li>List 1</li>


<li>List 1</li>


<li><label for="cb"></label></li>


</ul>


<div id="box">


<p>Content 1</p>


<p>Content 2</p>


<p>Content 3</p>


</div>


</body>


</html>

Код (разметка): болван

max-paninn

Хорошо, Я чрезвычайно глуп. Это работает (просто стилизуем div .box, и все работает отлично):

 


<!DOCTYPE html>


<html><head>


<meta charset="UTF-8">


<title>CSS ShowHide</title>


<style>


.box { display: none; }


.span:focus ~ .box { display: block; }


</style>


</head><body>


<ul>


<li>List 1</li>


<li>List 1</li>


<li>


<a href='#' class=span tabindex=0>Show</a>


<div class=box>


<p>Content 1</p>


<p>Content 2</p>


<p>Content 3</p>


</div>


</li>


</ul>


</body></html>

Код (разметка): Тестирование в Chrome и Firefox.

Saint11

Привет, Вы можете попробовать это:

 


<!DOCTYPE html>


<html><head>


<meta charset="UTF-8">


<title>CSS ShowHide</title>


<style>


div#tabs p{display:none;}


div#tabs p.tab1:target {display:block;}


div#tabs p.tab2:target {display:block;}


div#tabs p.tab3:target {display:block;}


</style>


</head><body>


<div id='tabs'>


<h2 class="nav-tab-wrapper">


<a href="#tab1" class="nav-tab tab1">test1</a>


<a href="#tab2" class="nav-tab nav-tab-active tab2">test2</a>


<a href="#tab3" class="nav-tab tab3">test3</a>


</h2>


<p id='tab1' class='tab1'>Awesome tab1 stuff</p>


<p id='tab2' class='tab2'>Tab2 stuff</p>


<p id='tab3' class='tab3'>Tab3 stuff</p>


</div>


</body></html>

Код (разметка): это помогает Удачи

Похожие темы	Дата
QuarkXpress, InDesign, CorelDRAW, Adobe Illustrator	19.10.2024, 18:10
Как отобразить раскрывающееся меню Foundation 6 ul в виде встроенного блока или встроенной таблицы	19.10.2024, 18:10
помогите добавить ссылку html в список	19.10.2024, 18:10
какой конструктор страниц WP с возможностью перетаскивания?	19.10.2024, 18:10
Фоновое изображение в Div с цветовой подписью, следующей за АЛЬФА	19.10.2024, 18:10
У меня есть проект, пожалуйста, помогите	19.10.2024, 18:10
Как зациклить несколько изображений на одной странице/публикации	19.10.2024, 18:10
Разрушение длинной формы	19.10.2024, 18:10
какая CMS лучше подойдет для моей задачи	19.10.2024, 18:10
Попытка использовать карусель	19.10.2024, 18:10

Возможен ли этот трюк с показом CSS?

Рамис Кадыров

Markk1

max-paninn

Saint11

I AM

Интересно