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: Абалдеть
|
| Часовой пояс GMT +3, время: 05:08. |