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.

This entry was posted in Free Scripts Ready Code. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *