Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More





Mouseovers with CSS Instead of JavaScript

Maxine Sherrin at WestCiv has a helpful new tutorial on creating mouseover effects with style sheets, Buttons without Javascript. Maxine has written this in an easy to understand way with all the code samples. If you’re wondering how others make those nifty hover effects with style sheets, Maxine’s tutorial will help you learn how. She also links to other basics about links with CSS to help you on your journey, too.

As the tutorial also mentions, creating mouseovers with JavaScript and images typically uses up more bandwidth and increases the load time. So creating this nearly identical look with style sheets has some definite advantages. It’s also fast and easy to create. Personally, some of the most fun I have is playing with the hover effects. You don’t need to know a whole lot of CSS to create them, either. The key is to make sure they’re user friendly by making sense and being consistently used throughout your site.

So if you haven’t tried style sheets yet, trying Maxine’s tutorial for creating this mouseover effect is a great place to get your feet wet. She also links on over to introductory material if you need it, too.

And if you’re already familiar with style sheets but would like to learn some new tricks, it’s great for that, too. More terrific style sheets info for the bookmarks!

02:08 pm, pst14 November, 2001 Comments, Trackbacks ·

Categories: CSS, Design


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books,, (Canada), (UK), (France), (Germany), (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Cover - Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points, by 37Signals. New Riders Press (March 2, 2004). 

Web Accessibility: Web Standards and Regulatory Compliance

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with
Page last modified 14 July, 2007 - 10:23pm PDT Page load time: 0.009013 seconds.