scriptygoddess

01 Sep, 2002

css hovers

Posted by: kristine In: CSS|MT hacks

I really like the look and function of rollovers, but sometimes I don't want to use javascript and I don't want to deal with images. So when I found css/edge's all css popups a while back, I really looked forward to finding a use for them. No javascript, just pure CSS.

After a question in the Movable Type forums, someone was looking for a calendar where you could easily see the titles of the entries on that day. So I put together codes and an example at Blogstyles in case it was useful to other people too.

It uses absolute positioning and a display:none in the css to show nothing when you aren't hovering, and then on hover, it positions the text directly below the calendar. I think its terrific! If anybody else has ideas for implementing this, I'd be happy to work with you to get it going :)

5 Responses to "css hovers"

1 | djwudi

September 2nd, 2002 at 6:29 pm

Avatar

I've been using a similar idea for a while on one of the pages on my site (this one, actually).

There are definite pros and cons to the method I'm using. On the pro side, it doesn't require an empty space for an absolutely-placed <div> – it just re-flows the page when the hidden text appears. This may or may not be desired, depending on the individual site design, but it works well in my case.

The downside, however, is that it doesn't work in any Gecko-based browser (Netscape, Mozilla, AOL 7 for the Mac, etc.). I'm not sure why, but it doesn't…so it wouldn't be the greatest choice for something like this calendar. I can deal with it on my page, since the information that is appearing isn't critical.

Just another approach to toss out there!

2 | Kevin

September 2nd, 2002 at 11:03 pm

Avatar

Thank you, Kristine. This ROCKS!!

3 | courtney

September 3rd, 2002 at 3:02 am

Avatar

heads up, it doesn't display correctly in IE5.2 for Mac OS X. The rollover text (entry title) appears under the body text… weird.

4 | robbin

September 25th, 2002 at 4:32 pm

Avatar

I just looked at the example at Blogstyles, and It would be a nice thing to implement on a photo-blog to popup the thumbnail on hoover… i think

thnx for all the work !

5 | kadyellebee

September 1st, 2002 at 12:39 am

Avatar

css hovers
I've been busy. I put together a tutorial and codes for my calendar and put them up at blogstyles: hover

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements