Хотите навсегда избавиться от простатита, геморроя, молочницы и других воспалительных заболеваний?
Эффективное лечение народными средствами!
Прополис + эфирные масла целебных растений + масло какао

HTML Hidden Help

Hidden help is opened by mouse click.

To do this, you can make a button or select a word in the text

1. Selected text.

Yada, Yada, Yada, Yada, Yada, Yada.

Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada.

 
Код:

Html

<div class="spravca">Yada, Yada, Yada, Yada, Yada, Yada. <input type="checkbox" id="hd-1" class="reference"/>
<label for="hd-1" >Help</label>
<span class="story">
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada
Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada
</span>
<div>

Css

.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}

2. A button that can be placed in any part of the content.

Yada, Yada, Yada, Yada, Yada, Yada.

Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada. Yada, Yada, Yada, Yada, Yada, Yada.

 
Код:

Html is the same as in the first example.

Css

.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}

I wish you creative success.

Запись опубликована в рубрике Free Scripts Ready Code. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *