Popup in CSS without Javascript

Last update on September 10, 2009 01:17 PM by jak58
Published by jak58

Popup in CSS without Javascript







Here's how to make a popup information in pure CSS, [no Javascript used].

Use :hover so as to use different CSS when moving the cursor.
Among the modified CSS attributes, use display:none to hide/show the popup when the cursor is over or not.

The content of the popup is just placed in a <span> tag within the <a> tag 

<html>
  <head>
    <title>Test popup</title>
    <style type="text/css">
<!--
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;
}
-->
</style>    
  </head>
  <body>
    Enter text<a class="info" href="http://xxx.com">CCM<span>Enter your description here</span></a>.
  </body>
</html>
Best answers for « Popup in CSS without Javascript » in :
Information overview popup without Javascript or CSS Show Creating a popup without Javascript or CSS Upgradig your laptop Unlike a desktop PC, the possibilities to upgrade hardware on a laptop are quite limited. In addition, replacement of components is not always the easiest. The...
Positioning elements in CSS Show
Download Notepad2 Show Notepad2 is a notepad without free installation with advanced syntax. Features: Syntax for the following languages: HTML, XML, PHP, ASP (JScript, VBS), CSS, JavaScript, VBScript, C / C + +, C #, Resource Script, Makefiles, Java, Visual Basic,...
Escape an apostrophe under javascript ShowEscape an apostrophe under javascript In Javascript, an apostrophe (single quote) into a string itself enclosed by apostrophes cause an error. To troubleshoot, you should escape the apostrophe by heading the backslash character to get...
Javascript - split () Show[Javascript] The split () function The split () function allows you to split a string and return the results in a table, using a string defined as a separator. In the example below, the split () can cut the date according to the...
Centering vertically a web page ShowCentering vertically a web page e .js file e .html file Centering vertically a web page; consider it as a waste time trying to achieve it with CSS. The most practical solution is to use JavaScript. e .js file Copy/paste the...
Download JavaScript Obfuscator Show
Download Firstpage ShowFirst Page 2006 is a HTML editor which is free and excellent. It allows to work with a colored HTML code, as well as to preview the site. 1st Page 2006 supports the standards HTML, XHTML, PHP, ASP, Cold Fusion, Javascript, CSS, SSI and Perl.
Download 12Ghosts Popup-Killer Show12Ghosts Popup Killer is a software to fight against popup windows intended for the web browser of Microsoft Internet Explorer. 12Ghosts Popup-Killer offers the possibility to clean up your internet history, delete cookies and remove the temporary...
Declaring a style sheet (CSS) ShowDeclaring a style sheet Style sheets are not directly integrated into the W3C's HTML recommendations. For this reason, you need to include elements in the HTML code indicating both the type of document, meaning the version of the HTML and CSS...
Style classes (CSS) ShowClasses and IDs Classes A web designer might want to assign different styles to the same tags. For this reason, the CSS specifications introduced the concept of classes. The definition of classes is as simple as that of styles. It involves...
Style syntax (CSS) ShowDefining a style Defining a style is done using simple text rules for describing the aspects of page elements. A CSS rule is characterised by two main elements: A type selector, for specifying which tags in the document the style applies to; A...
They need your help