|
|
20.04.2017, 20:02
|
|
Интересующийся
|
|
Регистрация: 12.05.2016
Сообщений: 22
|
|
|
Скрытие/ Открытие блока DIV по нажатию на PNG картинку
Есть блок DIV с текстом и своим CSS. Вот в этой теме похожее обсуждалось При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его
Но реально сделать вот так. Блока сразу нет, но есть PNG картинка, по клику на которую открывается блок, А картинка пропадает. |
|
20.04.2017, 20:21
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
dunakov,
для этого даже js не нужен.
|
|
20.04.2017, 21:14
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
Сообщение от рони
|
dunakov,
для этого даже js не нужен.
|
img:focus?
Другой вариант без использования JS не могу представить. |
|
20.04.2017, 21:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Nexus
|
|
Другой вариант без использования JS
|
:checked + img |
|
20.04.2017, 22:09
|
|
Интересующийся
|
|
Регистрация: 12.05.2016
Сообщений: 22
|
|
|
А JQuery toggle ?
И суть в том, что по клику на картинку , картинка пропадает, но появляется Div
|
|
20.04.2017, 22:17
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
<img onclick="$(this).hide().parents('.wrapper').find('.hidden').show();" alt="Image"/>
<div class="hidden" style="display:none;">Hidden content</div>
</div>
|
|
20.04.2017, 22:26
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
Или решение Рони без js ( https://jsfiddle.net/ydw9owgv/):
<style>
.wrapper .hidden,.wrapper input,.wrapper input:checked~label{
display:none;
}
.wrapper input:checked~.hidden{
display:block;
}
</style>
<div class="wrapper">
<input type="checkbox" id="checkbox-1"/>
<label for="checkbox-1"><img alt="Image"/></label>
<div class="hidden">Hidden content</div>
</div>
|
|
20.04.2017, 22:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
dunakov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.wrapper .hide, .wrapper :checked + label img, .wrapper input{
display: none;
}
.wrapper :checked ~ .hide {
display: block;
}
</style>
</head>
<body>
<div class="wrapper">
<input id="mic" name="" type="checkbox">
<label for="mic"><img src="http://im.haberturk.com/2013/02/06/ver1360145679/817721_detay.jpg" alt="Image" /></label>
<div class="hide">
<label for="mic"><img src="http://blagoveshensk.bezformata.ru/content/image62720071.jpg" alt="Image" /></label>
Hidden content</div>
</div>
</body>
</html>
|
|
20.04.2017, 22:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Nexus,
[HTML run]тут ваш код[/HTML]
|
|
20.04.2017, 22:43
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
|
Сообщение от рони
|
Nexus,
[HTML run]тут ваш код[/HTML]
|
Спасибо за информацию.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.wrapper .hide,.wrapper :checked+img,.wrapper input{
display:none;
}
.wrapper :checked~.hide{
display:block;
}
</style>
</head>
<body>
<div class="wrapper">
<label>
<input type="checkbox"/>
<img src="http://im.haberturk.com/2013/02/06/ver1360145679/817721_detay.jpg" alt="Image" />
<div class="hide">
<img src="http://blagoveshensk.bezformata.ru/content/image62720071.jpg" alt="Image" />
Hidden content
</div>
</label>
</div>
</body>
</html>
|
|
|
|
