How to change a div background image while hover without jQuery?

Question

I want to change the background of a DIV on hover event. Is there a way to do this using pure CSS?

Answer 1

Yeah, this is pretty easy with pure CSS, albeit IE6, if I remember rightly, doesn't support :hover on any elements except for a. But the following should work consistently in other browsers:

div {
    background: #fff url(path/to/image.png) 0 0 no-repeat;
}

div:hover {
    background: #ffa url(path/to/hoverImage.png) 0 0 no-repeat;
}