CMS MADE SIMPLE FORGE

Glossary / FAQ

 

[#249] CSS popups

avatar
Created By: Daniel Westergren (westis)
Date Submitted: 2006-01-05 07:04

Assigned To: Samuel Goldstein (sjg)
Resolution: None
State: Open
Summary:
CSS popups
Detailed Description:
Would be cool to be able to use CSS hover definitions of terms. Like when using
site filtering and hovering the links a CSS popup with the definition of the
term is displayed.

Can look like this:

HTML:
<span class="term">
  <a href="#"><strong>Mouse over the term here</strong> 
  <span>(Definition)</span></a>
</span>

CSS:
span.term a  {
	text-decoration:none;
	border-bottom:2px solid green;
	color: #FF0000;
}
span.term a:hover {
	color: #666666;
	background: #FFFFCC;
	text-decoration: none;
}
span.term a span {display: none;}
span.term a:hover span {
	display: block;
	position: absolute;
	left: 2%;
        top: 1%;
	width: 200px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: #0000CC;
	background: #FFFFCC;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	border: 1px solid #666666;
	text-decoration: none;
}

History