CSS Sprites are reverting to a:hover event due to PHP statementcommentary

I'm using CSS sprites for my wordpress navigation, and in order to get them to work I needed to use a php to show tell the current page for the section.

The CSS:

#sidebarnav ul#sidenav li.visionside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)  0px 0}
#sidebarnav ul#sidenav li.visionside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.teamside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png)  0px 0}
#sidebarnav ul#sidenav li.teamside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.mtlside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/mtl2.png)  0px 0}
#sidebarnav ul#sidenav li.mtlside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.blogside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png)  0px 0}
#sidebarnav ul#sidenav li.blogside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.orgside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png)  0px 0}
#sidebarnav ul#sidenav li.orgside a:hover {backgrou开发者_开发百科nd-position:0px -53px}

The CSS in the Header to be triggered by the PHP:

#sidebarnav ul#sidenav li.<?php echo $current1; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)  0px -106px;
}

#sidebarnav ul#sidenav li.<?php echo $current2; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png)  0px -106px;
}

#sidebarnav ul#sidenav li.<?php echo $current3; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png)  0px -106px;
}

#sidebarnav ul#sidenav li.<?php echo $current4; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png)  0px -106px;
}

The PHP:

 <?php
  if ( is_page('vision') ) { $current1 = 'visionside a'; }
  elseif  ( is_page('team') ) { $current2 = 'teamside a'; }
  elseif  ( is_page('commentary') ) { $current3 = 'blogside a'; }
  elseif  ( is_page('organizations') ) { $current4 = 'orgside a'; }
 ?>

But when the user hovers over the navigation the item shows the hover state, NOT the active state as it should.

The URL: http://jumpthru.net/newsite/vision/

That's a spectacularly poor way to be doing it. Ignoring common sense:

You could just add !important to each of your background properties, for example:

background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)  0px -106px !important;

You're doing it subtlety different from the way WordPress suggests:

http://codex.wordpress.org/Dynamic_Menu_Highlighting

I think you should read that tutorial more carefully, and redo this.

I agree mostly with what @thirtydot says as there's probably an easier WP way to add a class to an active link.. but to follow your logic you can make the whole thing much simpler.

First the CSS. though I did copy a bit more from your page file, you can remove a whole lot of those repeated declarations, so that the only thing each specific link needs is the background-image.. the original size, background-position etc does not change so something like this makes it easier to read:

#sidenav {
    width:204px; 
    list-style:none; 
    margin:0;
    padding: 0;
    padding-bottom:40px;
    float:left;
}

#sidenav li {
    float:left;
    width: 100%; 
}

#sidenav li a {
    display: block;
    height:53px;
    background-repeat: no-repeat;
    background-position: 0 0;
    text-indent: -9999px;
}

#sidenav li a:hover {
    background-position: 0 -53px;
}

#sidenav li.visionside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png);}
#sidenav li.teamside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png);}
#sidenav li.mtlside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/mtl2.png);}
#sidenav li.blogside a {background-image: url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png);}
#sidenav li.orgside a {background-image: url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png);}

now your "active" state only needs the one relevant link to have it's background-position changed to 0 -106px - no need to re-declare the image again

so your PHP logic could be this (possibly even simpler) but I'm trying to use what you have:

 <?php
  if ( is_page('vision') ) { $current = 'visionside'; }
  elseif  ( is_page('team') ) { $current = 'teamside'; }
  elseif  ( is_page('???') ) { $current = 'mtlside'; }
  elseif  ( is_page('commentary') ) { $current = 'blogside'; }
  elseif  ( is_page('organizations') ) { $current = 'orgside'; }
 ?>

Note: the same variable is used (and question marks would need replacing for your mtlside link).. and then the line in the <head> styles only then need read:

#sidenav li.<?php echo $current ?> a {
    background-position: 0px -106px;
}

That way it will only be the one link which is getting more specific showing the "active page" background-position.

I'm not sure what you actually want your hover to do, but the a:hover rule will not override the new "active" selector because the rule in the <head> styles above is more specific, if you actually want the the active link to show the same :hover state as normal you need to make the a:hover rule in the stylesheet more specific which you can do like this:

#sidebarnav #sidenav li a:hover {
    background-position: 0 -53px;
}

note I removed the double ID 's from the stylesheet selectors as there is no need for them, one ID is unique enough.. but then you can use the second ID (#sidebarnav) if required to make that last rule "weigh" more if specificity is then required.