Popup in CSS without Javascript
Here's how to create a popup in CSS, without making use of JavaScript
Use
:hover to switch CSS when moving the cursor.
Among the modified CSS attributes, use
display:none to hide/show the popup, depending on the position of the cursor.
A popup with a link
The content of the popup is placed in a
<span> tag within the
<a> tag
Here is the CSS code to add in the <head> your html file or in a separate CSS file:
a.info
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
text-decoration:none
}
a.info:hover {z-index:25; background-color:#ff0}
a.info span{display: none}
a.info:hover span
{
display:block;
position:absolute;
top:2em; left:2em; width:10em;
border:1px solid #0cf;
background-color:#555; color:#fff;
}
The HTML code to be inserted in your webpage:
Voici un lien vers <a class="info" href="http://commentcamarche.net">CCM<span>Communauté d'assistance et de conseils high tech</span></a>.
The results:
Without cursor:
With cursor:
A popup without link
If you just want to make a popup without any link, you can put href="#" in your <a> tag, but some browsers consider that "#" is a link to the top of the page.
To counter this, replace the <a> tag with a <span> tag (in HTML and CSS).
span.info
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
cursor: pointer;
}
See also
Knowledge communities.
Published by
jak58 -
Latest update by deri58
