Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу --

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 не будет опубликован.