1

我有一个只有顶级项目的基本导航。有一个超大的背景图像（导航高 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？

4

1 回答 1

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 像素的图像。如果有帮助，请标记为答案。

于 2013-08-18T00:41:51.527 回答