1

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

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

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

4

1 回答 1

0

看起来您正在尝试选择同时包含lithe和类的。您的选择器将选择任何具有 的项目，这些项目是该类项目的子项目。home current-menu-itemcurrent-menu-itemhome

但是，这应该对您有用：

#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不存在（或者至少由于某种原因它不会加载到我的检查器中）。

玩得开心！

于 2013-03-28T21:28:16.200 回答