Question

我有一个只有顶级项目的基本导航。有一个超大的背景图像（导航高100像素，bg图像高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。这是一个带有浅灰色背景的简单图像。你可以换掉任何100px乘50px的图像。如果它有帮助，请标记为答案。

Jquery MagicLine使用背景图片？

1 个答案: