Problem with :active state for nav on one page site

[dylanpine]

I’m having trouble getting :active states to work on a one page site. I have set up a nav that uses css sprites and I want it to change when that page is active. Currently I am using:

Code:

#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -160px;}
#nav li a:active.item1 {background-position:0px -160px;}

and the hover state works fine. :active does not though. You can see a (VERY, VERY) rough draft of the site here: http://p1n3.com. I am not sure, but I think it my have something to do with the fact that there is only one page on the site.

I have seen it working on http://www.atomiccartoons.com/, but couldn’t reproduce what they had working.

Any help would be appreciated – Thanks!

[dylanpine]

Hmmm… I think that’s what I have – I’m not seeing the difference.

My HTML specifies both an id and a class

Code:

and my CSS does pretty much the same thing

Code:

#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -160px;}
#nav li a:active.item1 {background-position:0px -160px;}

Am I missing something? Mine is a single page rather than multiple – that’s the only real difference I’m seeing.

[box]

"dylanpine" wrote:

Hmmm… I think that’s what I have – I’m not seeing the difference.

My HTML specifies both an id and a class

Code:

and my CSS does pretty much the same thing

Code:

#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -160px;}
#nav li a:active.item1 {background-position:0px -160px;}

Am I missing something? Mine is a single page rather than multiple – that’s the only real difference I’m seeing.

Restructure your element declarations like so:

Code:

a.item1:hover{…}
a.item1:active{…}

[dylanpine]

@box – Didn’t work for me.

@apostrophe Ok – will try JS – thanks! (As far as the content goes, nothing is permanent yet – there will be breathing room between the pages.)

Thanks to both of you for responding.

[Liz]

I think I’m experiencing similar problems, but I’m very new to coding! I’m trying to get active states working on fixed position nav tabs (CSS styled) that have targets on the same page. One being the homepage tab, one being to some blurb further down. On top of this I have a nice HTML5 smooth scroll working, which I’d like to keep. Active state only working on homepage, and other pages. It there a simple solution? Or no way without learning some javascript?

[Author]

Posts