css - 文字出版社； .current-menu-item 显示图像链接的悬停状态

Question

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

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

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

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

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

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

Answer 1

看起来您正在尝试选择包含 两者 home 和 的 li code>current-menu-item 类。您的选择器将选择任何具有 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 之间没有空格。该选择器将选择具有两个这些类的任何元素。

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

玩得开心!