Simple div Hovering Effect

Introduction

This is a very basic technique that I've seen used a lot but never knew how to do. You'll find yourself using this for a vast number of CSS related projects as it adds a great little addition of depth to a website. Such effects can be achieved with Javascript, but if you're like me and don't like JS this is the trick for you.

The Code

The only code you'll ever need for any hovering effect you want to have on any element in your website, and how to use it:

• .div_name { width: x; height: x; }
• .div_name :hover { width: x; height: x; }

This also works very well with lists, here's some example code to show you how. Obviously, customize this to suit your needs. This code will not work if you just copy-paste it in.

• .div_id ul { list-style: none; font-size: 11px; width: 540px; }
• .div_id li { background-color: XXX; border-top: XXX; }
• .div_id li a{ color: XXX; display: block; padding: XXX; text-decoration: none; }
• .div_id li a:hover { background: XXX; background-image: url(IMAGE_HERE.JPG); color: XXX; }

The values there are irrelevant, and I believe this works in most browsers. Don't quote me on it though!