Cпойлер средсвами css - Это Возможно ?
Собственно - сабж...
|
Э = нет нужен спойлер по клику(хотя можно и по наведению - который либо не убирается вообще - либо убирается только при повторном наведении)
Т.е триггер с запоминанием состояния, а не компаратор |
Чо нидь типо такого - но не сворачивающегося без заведомо направленного действия
<style type="text/css">
a#My .insert{
display:none;
border:red solid 1px;
width:200px;
height:100px;
}
a#My:focus .insert,
a#My:active .insert{
display:block!important;
}
a#My{
padding:12px;
width:200px;
border:blue solid 1px;
display:inline-block;
}
</style>
<a id=My href="#" onclick="return false">Клик<div class="insert"></div></a>
Тут пропадает при потере фокуса |
<style type="text/css">
a#My .insert{
display:none;
border:red solid 1px;
width:200px;
height:100px;
}
a#My:active .insert,
a#My:focus .insert,
a#My:visited .insert{
display:block!important;
}
a#My{
padding:12px;
width:200px;
border:blue solid 1px;
display:inline-block;
}
</style>
<a id=My href="#My" onclick="">Клик<div class="insert"></div></a>
Гы - Незакрываемое Окно родил :write: Правдо Для Мозиллы не работает (ток Ие и Опера |
А поведение :target не устраивает?
|
Octane,
Поду потещу - не пользовалси |
Octane,
:Таrget -клаассно - (* но хотелось бы через :checked, что пока не получаецо) Посколь оно после первого клика - более не закрывается (Тут во фрейме не в счёт, посколь идет искуственная очистка
<style type="text/css">
a#My .insert{
display:none;
border:red solid 1px;
width:200px;
height:100px;
}
a#My:target .insert,
a#My:active .insert,
a#My:focus .insert,
a#My:visited .insert{
display:block!important;
}
a#My{
padding:12px;
width:200px;
border:blue solid 1px;
display:inline-block;
}
</style>
<a id=My href="#My" onclick="">Клик<div class="insert"></div></a>
|
Как-то так:
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.details > input:checked + .text {
display: none;
}
.details input {
visibility: hidden;
}
.details label {
cursor: pointer;
color: #00f;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="details">
<label for="trigger">Скрыть/показать</label>
<input id="trigger" type="checkbox">
<div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
</body>
</html>
|
Octane,
:dance: Абалдеть - +++ Плюсы сорь уже не ставятся |
:dance: Абалдеть
|
Как обычно ie<8 лесом.)
|
Aetae,
Ну next - не чует - ток если через cкрипто-css expression |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.spoiler > input + .box > blockquote{
display: none;
}
.spoiler > input:checked + .box > blockquote {
display: block;
}
.spoiler > input {
display: none;
/*visibility: hidden;*/
}
.spoiler > label{
width:100px;
height:17px;
/*border:red solid 1px;*/
display:block;
position:absolute;
cursor: pointer;
}
.spoiler span.close,
.spoiler span.open{
margin-left:12px;
color: #00f!important;
text-decoration: underline;
}
.spoiler > input + .box > span.close {
display: none;
}
.spoiler > input:checked + .box > span.close {
display: inline;
}
.spoiler > input:checked + .box > span.open {
display: none;
}
.spoiler > input + .box > span.open {
display: inline;
}
.spoiler blockquote,
.spoiler{
padding:1em;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
}
.spoiler {
box-shadow: 0px 3px 8px #808080;
-webkit-box-shadow:0px 3px 8px #808080;
-khtml-box-shadow:0px 3px 8px #808080;
-moz-box-shadow:0px 3px 8px #808080;
-ms-box-shadow:0px 3px 8px #808080;
}
.spoiler blockquote {
margin-top:12px;
min-height: 23px;
border:#CDCDCD 2px dashed;
}
</style>
</head>
<body>
<div class="spoiler">
<label for="trigger"></label><input id="trigger" type="checkbox">
<div class="box">
<span class=close>Скрыть</span><span class=open>Показать</span>
<blockquote class="Untext">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</blockquote>
</div>
</div>
</body>
</html>
|
<details> <summary>Copyright 1999-2011.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details> |
| Часовой пояс GMT +3, время: 14:11. |