What is the best way to have a mouse over on a div tag so that when the mouse is placed over the area, the background image of the div changes??

CSS please, i don't really what to use javascript?

div#selector:hover{...}

But it won't work in non-supporting browsers, such as Internet Explorer.

The other method (I am not keen on this one)

<a href=""><div>...</div></a>

a:hover div{...}

<div>s are block elements and cannot be enclosed by inline elements such as <a>nchors.

if you want it to work in IE6 and below you'll need this http://www.xs4all.nl/~peterned/csshover.html

and just add a :hover pseudo class to the element.

However, changing backgrounds on mouseover or hover can be a rather "clunky" operation.
Changing the classname of the element with javascript is a much cleaner method and only needs

onmouseover="this.className='newClass'" onmouseout="this.className='oldClass'"

adding to the open tag

Yes they can. However, it is not semantic. You must weigh that up with the possibility of some loosing the feature because they have Javascript disabled (though that would be a significantly small proportion).

Yep, they can. You can do anything you want in HTML should you really want to. Provided you are not bothered whether it works in all user agents or not.

Maybe I should have worded it to "and should not be enclosed". But generally we try to teach the correct way to code in HTML, irrespective of validation to a particular doctype. And a block (structural) element inside inline or markup elements has been poor code since HTML 1.

BTW,
Apologies if the above post sounds patronising, it wasn't meant to be.

It wasn't patronising.

The war within Web standards: pragmatists versus purists