View Full Version : Hover State stays Active using Back Button

07-29-2011, 02:06 AM
Ok, so here is the site http://www.furniturelandnewjersey.com/test.html (http://www.furniturelandnewjersey.com/test.html)

Issue is with both the side and top navigation.

Header Nav has 4

Side has 2, 3rd state is supposed to just be red rest, but had trouble coding it.
hover turns text red and has background box in light grey
inactive state is just grey text

So when you click any element, go ahead and try. Then use the back button, the button will remain int he hover state. I know it has something to do with the back/forward cache and i saw a solution for jspry but am not sure how to deal with this css based navigation.

07-29-2011, 02:10 AM
The cause for this is not the hover state but rather the focus state since you have defined that same state to the :hover and :focus pseudo classes and when clicking a link the link is actually focused and stays as long as you click anywhere else. Remove the focus selector and it should be as you want it.

07-29-2011, 02:34 AM
I tried removing the focus class, but it still stays highlighted red or in the hover state until the mouse is somewhere else on the page.

07-29-2011, 03:06 AM
It doesn’t for me in Firefox 5 if you remove #menuheader #navlists li a:focus from

#menuheader #navlists li a:hover, #menuheader #navlists li a:focus {
background-position: 100% -70px;

(or likewise with nav ul a:focus and the general a:focus selector)

07-29-2011, 03:28 AM
ok I think it works I think. The old method may have been in the cached somehow. I will take your word that it works and test it out latter. I don't want to log out of the hosting server yet. I will check out the results of removing focus, and if it works in ff5, same as what I have, than it should work.

A side question.

Is netrender accurate? I have also used adobe browser labs and coloring comes out weird when I use the adobe labs but ok on netrender.

Anyway the top header image comes out centered in ie7 and I am wondering if I should just make the header image big enough to cover the entire width of the website so it centers. Not sure if ie7 supports the header tag from html5.

07-29-2011, 10:16 AM
Not sure if ie7 supports the header tag from html5.

Haha, that’s a good one. Yeah, no, IE7 does definitely not support any HTML5 – just as IE 8 doesn’t. In my opinion you shouldn’t use HTML5 for non-trivial things yet. You can use HTML5 elements but don’t rely on them for styling or whatever.