0

我正在创建一个菜单，其中每个链接都有自己独特的图标。图标是白色（默认状态）和红色（悬停状态），分为两个不同的精灵文件（例如 jQuery UI 样式，其中两个文件除了颜色相同。）我正在尝试为悬停应用过渡效果，但由于不能简单地使用 jQuery 或 CSS3 来完成，所以我研究了其他方法。

<ul>
   <li>
      <a href=""><span></span>Menu Item 1</a>
   </li>
   <li>
      <a href=""><span></span>Menu Item 2</a>
   </li>
   <li>
      <a href=""><span></span>Menu Item 3</a>
   </li>
</ul>

我找到了使用多个 div 或 span 并调整不透明度并应用过渡的示例，但最终会得到一堆标记。

<ul>
   <li>
      <a href="">
         <span class="default"></span>
         <span class="hover"></span>Menu Item 1
      </a>
   </li>
   <li>
      <a href="">
         <span class="default"></span>
         <span class="hover"></span>Menu Item 2
      </a>
   </li>
</ul>

有没有更简单的方法来实现这种效果，或者这是我唯一的选择？

4

0 回答 0