Css Wordpress。显示图像链接悬停状态的当前菜单项

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

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

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

这里是链接：这里是代码一览表

CSS我将在深入制作后使用sprite：

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

---

建议或链接到好的文章，解决这个问题是非常感谢

看起来您正在尝试选择包含主菜单项类和当前菜单项类的li。您的选择器将选择具有当前菜单项的任何项目，这些项目是具有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菜单项之间没有空格。此选择器将选择具有这两个类的任何元素

还要注意的是，名为nav-btn-home-hover.png的图像似乎不存在，或者至少出于某种原因，它不会加载到我的检查器中

---

玩得开心

谢谢@Jared！很高兴知道。如果你可以编辑你的答案来包含这个，我可以接受它，为了让它工作，我需要添加>a so访问。主页a：悬停，访问。主页。当前-菜单项>a{