由于PHP语句注释，CSS精灵将恢复为：hover事件

我在wordpress导航中使用CSS精灵，为了让它们正常工作，我需要使用php来显示该部分的当前页面

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 {background-position:0px -53px}

要由PHP触发的标题中的CSS：

#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;
}

#sidebarnav ul#sidenav li。{
背景：url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)0px-106px；
}
#sidebarnav ul#sidenav li。{
背景：url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png)0px-106px；
}
#sidebarnav ul#sidenav li。{
背景：url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png)0px-106px；
}
#sidebarnav ul#sidenav li。{
背景：url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png)0px-106px；
}

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'; }
 ?>

但是，当用户将鼠标悬停在导航上时，该项将显示悬停状态，而不是它应该显示的活动状态

---

URL:

这是一种非常糟糕的方式。忽视常识：

您只需添加

！重要信息

到您的每个

背景

属性，例如：

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

---

你的做法与WordPress的建议不同：

---

我认为你应该更仔细地阅读该教程，然后重做。

我大部分同意@thirtydot的说法，因为可能有一种更简单的方法可以将类添加到活动链接中。。但是按照你的逻辑，你可以使整个事情变得更简单

首先是CSS。虽然我确实从您的页面文件中复制了更多内容，但您可以删除大量重复声明，因此每个特定链接只需要背景图像。。原始大小、背景位置等不会改变，因此类似这样的内容更易于阅读：

#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);}

现在，您的“活动”状态只需要一个相关链接即可将其

背景位置更改为
0-106px
-无需再次声明图像

因此，您的PHP逻辑可能是这样的（可能更简单），但我尝试使用您现有的：

 <?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'; }
 ?>

注意：我从样式表选择器中删除了双
ID
，因为不需要它们，一个ID就足够唯一了。。但是如果需要，你可以使用第二个ID（#sidebarnav），使最后一条规则“更重要”，如果需要特殊性。
Pekka，对不起，我发布了一些针对不同精灵的错误CSS。我没有不尊重的意思，我对Stack Overflow社区很好。Pekka，如果你能转载这些更改，我将不胜感激。你能指出我做这件事的糟糕方式是什么吗？我在这里是为了学习，而不仅仅是为了被批评。我使用了你上面显示的wordpress链接作为参考，因此如果你能让我知道我做得这么差，我可以尝试修复它。我不仅仅是批评，我给了你一个修复你所拥有的；）好吧，具体点。您有四个东西看起来像
#sidebarnav ul#sidenav li。
。对于非“当前”页面，选择器将类似于
#sidebarnav ul#sidebnav li.
，这是无效的CSS。您应该将点移动到PHP变量内部。但是，这也不是真的。您应该在当前页面的
的HTML中添加一个类“current”，然后使用类似于
\sidebarnav ul\sidenav li.visionside.current{CSS for active visionside here}
的内容。那就更好了。值得一提的是，OP提出了另一个问题，并且似乎已经决定在那里实现公认的答案：@thirtydot，谢谢你从未见过它：）
#sidenav li.<?php echo $current ?> a {
    background-position: 0px -106px;
}

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