javascript - 在 mouseOver 上显示基础链接

Question

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

我想做的是有一个在鼠标悬停时向左滑动的菜单，显示基础链接...我一直试图让它工作但没有取得太大成功。我尝试在克隆元素上使用绝对定位将其放在其父元素后面，但这没有用。我使用 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{
   list-style: none;
   float: left;
   width: 150px;
   height: 20px;
   color: #CCCCCC;
   height: 60px;
   line-height: 30px;
   text-align: center;
}

#nav a{
   position: relative;
   display: block;
   width: 150px;
   z-index: 1;
   background: #777777;
}

.slideClass{
   position: absolute;
   left: 0;
   top: 0;
   display: block;
   background: #000000;
   color: #6699dd;
   z-index: 3;
}

您可以在以下位置查看实例: jQuery slide menu

Answer 1

我已经在 working fiddle 中修改了你的 CSS

我对您的 CSS 所做的主要更改:

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

我还删除了#nav li 的height: 声明和.slideClass 的position: 相关声明.最后，我也将 #nav a 更改为 display: inline-block;。