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

您似乎正在尝试选择包含 li 和 home类的current-menu-item。您的选择器将选择current-menu-item项{em> <{1>}类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之间没有空格。此选择器将选择具有两个这些类的任何元素。

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

玩得开心！

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

1 个答案: