Javascript 在鼠标上方显示基础链接

我搜索了一下，找不到适合我问题的答案。尽管使用z指数和绝对定位似乎是可行的，但事实并非如此

我想做的是在鼠标上方有一个向左滑动的菜单，显示底层链接。。。我一直试图让它工作，但没有多大成功。我尝试在克隆元素上使用绝对定位将其放置在其父元素后面，但没有成功。我使用z-index来确保克隆也位于其父代之后

我的代码如下：

<ul id="nav">
   <li><a href="#" data-slide-text="slide-aaa">aaa</a></li>
   <li><a href="#" data-slide-text="slide-bbb">bbb</a></li
</ul>



(function ($) {
$.fn.doIt = function () {      
    this.find('li')
        .css({
            overflow : 'auto'
        })           
        .hover(
            function(){
                $(this).find('a:first').animate({
                    marginLeft : "-150px"
                }, 'fast')
        },
            function(){
                $(this).find('a:first').animate({
                    marginLeft : "0px"
                }, 'fast')                    
        }) 
    this.find('a')
        .each(function(){
           var slideText = $(this).data('slideText');
           $(this)
                .clone()
                .text(slideText)
                .appendTo($(this).parent())
                .addClass('slideClass')
        });
};
})(jQuery);

您可以在以下位置看到一个实例：

---

我已经在一个

我对css所做的主要更改是：

#nav li {
  display: inline-block;
  overflow: hidden !important;
  white-space: nowrap;
}

---

我还删除了您的高度：导航李的声明和位置：与.slideClass相关的声明。最后，我将nava改为display:inline block；同样如此。

无法100%确定这是否是您要寻找的：

将LIA更改为绝对值

#nav a{
    position: absolute;
    top: 0;
    ...
}

和悬停动作来设置位置动画，而不是边距动画

            .hover(
                function(){
                    $(this).find('a:first').animate({
                        left : "-150px"
                    }, 'fast')
            },
                function(){
                    $(this).find('a:first').animate({
                        left : "0px"
                    }, 'fast')                    
            })

---

您忘记调用$nav.doIt；正如在最初的示例中，在我看来，当我悬停时，你好像在隐藏链接，这正是我希望实现的目标。谢谢，事实上，我收回了。JSFIDLE中的效果正是我想要的效果，但它并没有完全按照我所希望的那样工作。基本上，当您将鼠标悬停在链接上时，它应该显示相同的链接，尽管颜色不同。基本上是想为菜单创建一个滑动动画，但保持链接完整。这就是我想要的效果。它会像你预期的那样向左滑动。背景没有改变有什么原因吗？每个slideText类都有黑色的背景，还有我难看的颜色和我留下的一些调试代码。您可以看到使用您在原始问题的链接中提供的代码修改和编辑的实时示例。我就是不能让背景显示出来black@Imperialized，是该颜色在选择器中将nav设置为父级。覆盖你可以使用！重要信息，或者您可以使用不同的选择器：导航slideClass，或者您可以将a选择器更改为不太具体。好的，我现在知道了。我没有意识到，当您选择样式时，它不会覆盖样式。将其更改为class=navlink并使navlink成为选择器，无需使用即可产生效果！重要的是要覆盖样式。谢谢你的快速回复。@Imperialized没问题。选择器层次结构实际上有一点科学性，它不像处理顺序中的最后一个那么简单。已经尝试过了。不幸的是，我今天刚刚在这里创建了我的帐户。我知道这不是最后一次被处理。我知道它是内联样式，链接样式表。我只是假设将该类直接添加到元素中会导致它覆盖常规链接选择器颜色。每天学习新的东西！

            .hover(
                function(){
                    $(this).find('a:first').animate({
                        left : "-150px"
                    }, 'fast')
            },
                function(){
                    $(this).find('a:first').animate({
                        left : "0px"
                    }, 'fast')                    
            })