WordPress； .current-menu-item 显示图像链接的悬停状态

Question

所以我有一个使用图像而不是文本的导航栏，一个图像用于正常状态，另一个用于悬停状态。

在 wordpress 中，您可以使用内置的 .current-menu-item 类影响当前所在页面的菜单项，这对文本非常有效，但我似乎无法让它适用于图像.

在特定页面上时，我希望关联的菜单项显示悬停状态下使用的图像。

这里是链接：http://ericbrockmanwebsites.com/dev4/，这里的代码一目了然。

CSS（我将在进一步投入生产后使用精灵）：

 #access {
    display:block;
    float:left;
    margin:30px 0;
    padding:0;
    list-style:none;
  }

 #access li {
    display:block;
    float:left;
    margin:0 5px;
    padding:0;
    list-style:none;
  }

  #access .home a {
    display: block;
    background-image: url(images/nav-btn-home.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .home a:hover, #access .home .current-menu-item {
    display: block;
    background-image: url(images/nav-btn-home-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .music a {
    display: block;
    background-image: url(images/nav-btn-music.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .music a:hover,   #access .music a:active {
    display: block;
    background-image: url(images/nav-btn-music-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

标记（使用 WP 内置的自定义菜单）：

<nav id="access">
    <?php wp_nav_menu( array( 'theme_location' => 'main-nav' ) ); ?>
</nav> <!-- access -->

非常感谢提供解决问题的好文章的建议或链接！

Answer 1

您似乎正在尝试选择包含both home 和 current-menu-item 类的li。您的选择器将选择带有 current-menu-item 且属于 home 类的项目的子项的任何项目。

这应该对你有用，但是：

#access .home a:hover, #access .home.current-menu-item > a {
    display: block;
    background-image: url(images/nav-btn-home-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
}

注意.home 和.current-menu-item 之间没有空格。此选择器将选择具有 both 这些类的任何元素。

另外请注意，看起来名为 nav-btn-home-hover.png 的图像不存在（或者至少由于某种原因它不会加载到我的检查器中）。

玩得开心！