2

我正在开发一个基于自定义 CMS 平台的网站，该网站的所有者希望我将“主页”导航菜单项替换为主页图标/图像。通常，这很容易，但我无权访问 HTML/PHP 文件，并且 CMS 不允许我向菜单项添加类。我也不能添加 Javascript，所以我必须通过 CSS 来完成。

CMS 生成的 HTML 或多或少看起来像这样：

<header class="header">
  <nav>
    <ul>
      <li><a href="http://www.home.com/">Home</a></li>
      <li class="first"><a href="http://www.home.com/about">About</a>
        <ul>
          <li><a href="http://www.home.com/about/team">Team</a></li>
        </ul>
      </li>
      <li><a href="http://www.home.com/services">Services</a>
        <ul>
          <li><a href="http://www.home.com/services/financial">Financial</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

我想我可以通过这样的方式来完成它：

.header nav > ul > li:first-of-type {
  background: url('home.png') no-repeat center top;
  -webkit-transition: background-position 0.3s ease-in; 
     -moz-transition: background-position 0.3s ease-in; 
       -o-transition: background-position 0.3s ease-in; 
          transition: background-position 0.3s ease-in; 
}

.header nav > ul > li:first-of-type:hover {
  background-position: center bottom;
}

.header nav a[href="http://www.home.com/"] {
  color: transparent !important;
}

但这似乎并不奏效。我的语法在某处是错误的，还是我遗漏了什么？如果你有更好的方法通过直接的 CSS 来做到这一点，我会全力以赴。

您可以使用这个JS Fiddle查看完整代码。

谢谢！

4

1 回答 1

0

一旦清除了班级的问题，只有 2 个问题悬而未决。背景位置应该在左边而不是中心，并且 a 的选择器不起作用。您可以保留之前元素使用的样式，它更加清晰：

.header nav > ul > li:first-of-type {
    background: url('http://placekitten.com/20/60') no-repeat left top;
    -webkit-transition: background-position 0.3s ease-in; 
    -moz-transition: background-position 0.3s ease-in; 
    -o-transition: background-position 0.3s ease-in; 
    transition: background-position 0.3s ease-in; 
}


.header nav > ul > li:first-of-type:hover {
    background-position: left bottom;
}

.header nav > ul > li:first-of-type a {
    color: transparent;
}

顺便说一句，重要的是没有必要

演示

（只需将小猫图像更改为更适合的另一个）

于 2013-05-29T18:03:41.647 回答