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;
}

我还删除了针对height:的{{1}}和#nav li相关声明的position:声明。最后，我已将.slideClass更改为#nav a。

Answer 2

不是100％确定这是否是您所寻找的：http://jsfiddle.net/t4ag1tby/

将li a更改为绝对

#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')                    
            })

在mouseOver上显示基础链接

2 个答案: