菜单鼠标悬停动画：在菜单链接上方显示突出显示

Question

由于 HTML 限制，我有一个似乎无法解决的问题。

这是一个可以解释整个事情的捕获：

#

如您所见，我希望透明部分移动到鼠标悬停的菜单项上方。

但当我想到这一点时，我发现这不起作用，因为一旦透明部分到达鼠标下方，菜单项就会失去 :hover stat。

如果使用 actionscript3，则可以通过在我的透明部分上设置 .mouseEnabled 属性来轻松完成此操作，这样鼠标就不会考虑它。

你知道 html 是否可以实现类似的功能吗？您还有其他解决方案/途径可以遵循，以实现我想做的成功吗？

感谢您的帮助！

Answer 1

实现这种效果的关键是使用CSS属性z-index。例如，如果您的菜单结构如下所示：

<div id="menu">
  <ul>
    <li>
      <a href="#">Master/PHD Education</a>
      <span>Introduction, Master & Doctorans</span>
    </li>
  </ul>
  <div id="transparent_overlap"></div>
</div>

技巧是使用 3 层，第一层是可以分配给 div 的菜单背景（棕色和白色），然后第二层是透明重叠，并且前面的那个是有链接的 LI。使用 css，它看起来像：

#menu{
   background:..
}

#transparent_overlap{
   background:..transparent effect..
}

li{
   position:relative;
   z-index:3;
}

现在您只需使用 javascript 将透明重叠移动到当前悬停选项。