Title | Hover box buil in CSS |
Date | 28-Nov-2005 23:18:52 EET |
JSPWiki version | 2.2.33 |
Submitter | 84.172.229.9 |
Idea Category | TemplateIdea |
Reference | |
Idea Status | NewIdea |
Test2
Uberschrift#
Tablelle | sashdf |
for anyone doing an own template or just editing the style sheets, I created a hover box it's content is only visible when you point with your mouse on it. Unhovered you only see the title.
It is totally build in CSS. I found that snipets on selfhtml.org.
Only add the following lines into your CSS file:
.hoverbox { z-index:3;} .hoverbox .hoverheader { color:#fffffd; background:#b3b06c; font:bold 16px verdana, sans-serif; text-decoration:none; display:block; padding:5px; border:1px solid black;} .hoverbox .hoverheader:hover { color:black; background:#ddd8b7; } .hoverbox .hoverheader .hovertext {display:none;} .hoverbox .hoverheader:hover .hovertext { color:black; background:#ffffff; font:normal 16px courier, sans-serif; border:1px solid black; display:block; padding:10px;}
You can use the styles in your page with the following lines
%%hoverbox %%hoverheader Box Title %%hovertext Box Content %%%%%%
Hoverheader an hovertext can contain wiki syntax itself. So you can hide text you don't need that often.
Have fun with it.
Add new attachment
Only authorized users are allowed to upload new attachments.