The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Changing Image on Mouseover Re: [Solved] Changing Image on Mouseover


I didn’t have time to copy and paste your code to test. But one thing jumped out at me that could be causing your problem.

#aboutme: hover{
background-image: url(aboutmesmall.png);
background-repeat: no-repeat;

Try changing the selector to #aboutme:hover

Removing the space will help the browser know what you want. I think all pseudo selectors like that can’t have a space.

Another thing I noticed, you currently are using DIVs with an onclick as a link. I mean this works I guess but I have never seen it done like this. A more common markup approach would be to do an unordered list. The markup you have now is useless to someone who is blind or uses a screen reader. There is no text on the page to say there is a link.

<ul id="navigation">
<li><a href="#">About Me</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Fbook</a></li>

Watch this screencast for a standard way of doing image rollovers with css.

I hope this helps you out.