Question

I have a problem where if the previous page browser button is used, the current page button state for the page that was previously viewed remains. This results in that multiple menu items appear in their ‘current’ state when the previous page browser button is used. If the ‘current’ state of the previously viewed page is rolled over, it reverts to it’s normal state. Doesn’t make sense? Click here to view the site. I’ve never had this issue before, and tired everything! Any advice appreciated!

Answer 1

Your issue here is that when you leave the page and then go back, your original image (which was hovered when you left) isn’t getting swapped back to its non-hover state until the mouseout event occurs.

My suggestion would be to use background-image instead of imgs, and then you can change it on hover easily using the CSS :hover selector, something like:

<a id = "groove" href = "/groove/">

</a>

CSS:

#groove {
    background-image: url('groove.gif');
    height: 20px; /*just an example*/
    width: 100px; /*another example*/
}
#groove:hover {
    background-image: url('groovehover.gif');
}

I hope that helped!