How to magnify a pure CSS menu item when hovering using JS?

I have a pure CSS menu and would like to provide a little visual开发者_JAVA百科 feedback. As the cursor passes over an item, I would like it to magnify to 110% or 120% of its normal size.

I just use text in an unordered list, no images.

Can this be done easily?

Update: MS IE 7+ (any thing else is a bonus & probably free anyway)

You don't really need JavaScript for this. CSS has the transform property to apply affine transforms to elements. Just do something like li:hover { transform: scale(1.2); }.

It works in all recent version of Safari and Firefox, and IE 9 and newer — and if you're open to JavaScript solutions, Transformie adds support for 6+.

I made a Fiddle to illustrate (includes all the browser prefix versions, but I didn't actually test it in all the browsers, so I might have bungled something somewhere).

Your best bet is to just adjust the font-size on hover:

li:hover {
    font-size : 1.2em;
}

if you've defined everything in ems, the entire thing will adjust. If you have static margins/etc you want to scale, you're still better off just re-defining those in CSS, but you can also use the zoom or transform properties as Chuck pointed out.