Question

我正在创建一个菜单，其中每个链接都有自己独特的图标。图标是白色（默认状态）和红色（悬停状态），在两个不同的精灵文件之间分开（例如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或spans并调整不透明度并应用转换的示例，但最后会出现一堆标记。

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

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

在悬停时转换背景图像有什么更好的解决方法？

0 个答案: