Jquery MagicLine 使用背景图片？

Question

我有一个只有顶级元素的基本导航。有一个超大的背景图像(导航是 100 像素高，背景图像是 200 像素高)被添加到正在访问的当前页面。

 <ul>
  <li class="current-menu-item"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
 </ul>

我希望能够模拟 jQuery MagicLine 的行为但使用我的背景图片，并在用户将鼠标悬停在其他导航链接上时让它从一个元素移动到另一个元素。

这在 jQuery 中可行吗？ CSS3？

Answer 1

我已经在此处发布了解决方案:http://www.nextdesigns.ca/magicline/index.html

其实很简单。最后，我只需要稍微修改一下 CSS。

我更新了 CSS 中的几个元素。如前所述，我在这里添加了一个静态宽度:

#example-one li { 
    display: inline-block;  
    width:100px; //NEW
}

然后，对于 MagicLine，我更新了尺寸和背景属性:

#magic-line { 
    position: absolute;
    bottom: -2px; 
    left: 0; 
    width: 100px; //NEW
    height: 50px; //NEW
    background: #fff url(bg.png); //NEW
    z-index:-1;
}

我在 CSS 旁边弹出了 bg.png。这是一个带有灰色背景的简单图像。您可以将其换成任何 100 像素 x 50 像素的图像。如果对您有帮助，请标记为答案。