Archive | December 3, 2007

Popup panels on mouseover using only CSS

I found this elegant little hack the other day while browsing for something completely different. I see that the code has made the rounds, and appears on sites like xmpp.com and ietf.org, but the credits seem only to lead to other marketing sites harvesting page views and hosting ads. A sample is available at http://www.phlapjaxs.com/demo.html and consists of a span tag defined as absolutely positioned and block-display, which in turn is inside an anchor tag set to position: relative. That means the block will “pop” at the location of the anchor and can display whatever text (or images or other content) is within the span. Spiffy!

Powered by WordPress. Designed by Woo Themes

This work by Ted Roche is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.