How do I change button image on mouse hover?

I am trying to change a button image when the mouse is hovered over it. For now I am initially setting the button's background image on a "On start of layout event". However when I try to change the background image on a "Cursor is over..." event nothing happens.

NOTE: I know this can be done easier using a sprite rather than a button, but I need this to be a button for WCAG accessibility reasons. Also, I did try to do inline javascript with the onmouseover() function but couldn't get that to work either.

It would probably be easier to do by adding a CSS file, giving the button a class, and then adding a hover style for that class to the CSS file.

That worked. Thanks!