php - CSS Sprite 正在恢复为 :hover event due to PHP statementcommentary

Question

我在我的 wordpress 导航中使用 CSS sprites，为了让它们正常工作，我需要使用 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 触发的 Header 中的 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;
}

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

但是当用户将鼠标悬停在导航上时，该元素显示悬停状态，而不是应有的事件状态。

网址:http://jumpthru.net/newsite/vision/

Answer 1

这是一种非常糟糕的做法。忽略常识:

您可以将 !important 添加到每个 background 属性中，例如:

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

---

您的做法与 WordPress 建议的方式有所不同:

http://codex.wordpress.org/Dynamic_Menu_Highlighting

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