jquery - 使用 CSS 导航翻转并应用 jQuery

Question

我想知道如何为我的导航栏创建翻转，并且如果可能的话，一旦导航悬停，我还应用一些 JQuery 将不透明度设置为 0 到 100。

悬停时我的导航。字母中的光芒。

HTML:(忽略空的 div)

<nav>
    <ul>
      <div class="ref1"><!-- empty div for reflections --></div>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Client Login</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
      <div class="ref2"><!-- empty div for reflections --></div>
    </ul>
  </nav>

CSS:

nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto;  width: 638px; }
nav ul { padding: 18px 0;  }
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 32px; margin: 0 auto;  }
nav ul li:first-of-type { background: none; }
nav ul li:last-of-type { background: url(../images/ref2.png) no-repeat right bottom; margin: 10px 0 0 0; }
nav ul li a { color: #626262; font: 16px Arial, Helvetica, serif; }
nav ul li a:hover { color: #dfdfdf; }

Answer 1

您需要做的是设置翻转图像。一种用于正常的“未悬停”状态，另一种用于“悬停”并将相关类应用于您的导航链接。

...
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About Us</a></li>
...

然后您可以使用 CSS 在元素悬停时将图像显示为背景图像:

<li><a href="#" class="home">Home</a></li>

nav ul li.home:hover {
background: url(../images/home-hover.jpg);
display: block;  /* apply this to give the element the dimensions of your image*/
width: 69px; /*width of your nav image*/
height: 25px; /*height of your nav image*/
}

这只是一个快速入门示例，但您需要为每个元素进行设置。

此外，您可能想查看 CSS Sprites