CSS Question
How can I make a CSS only popup or tooltip?
I've made some code for making a paragraph scrollable. I want to make all of the content outside of the popup
<div><div style="position:relative;">
<div id="popup" style=" overflow: hidden; position: relative; width: 100px; height: 100px;">This must be visible. And everything out of this div, must be hidden</div>
<div style="position:absolute;left:-100px;top:-50px;">the tooltip thing</div>
</div>
<p>These must be hidden.</p>
<p>These must be hidden.</p>
<p> And These too</p>
Here is the pop-up code(noscript):
<style>
div.po
{
display: none;
}
div.p
{
display: block;
}
button:hover + div.p {
display: none;
}
button:hover + div.po {
display:block;
}
</style>
<button>Show</button>
<div class="p">Other contents</div>
<div class="po">Popup</div>
css button: hover is only changing one elements style.
when button is pressed, I want to make both 'div.po - style' into display: block
and 'div.p - style' into display: none.
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
HTML: Body text.
</div>
<div id="popup">
<a href="index.html">
Close
</a>
This is pop-up text
</div>
</span>
</div>
CSS:
#popup_bg
{
display:none;
height:100vh;
width:100vh;
position: fixed;
left:0;
right:0;
}
#popup_bg
{
display:none;
height:10vh;
width:10vh;
position: fixed;
left:45%;
right:45%;
}
#box: checked
#popup_bg
{
display:block;
}
#box: checked
#popup
{
display:block;
}
It's been a long time, since I asked this this question. But there was no right answer. But now I know everything I want. Here is the code.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download