Question

鉴于此代码：

$(function(){
    ul = $("#titlelist");

    li = $('#titlelist li');

    $('.list').mouseenter(function(e){             
        $(this).css({background:'#000', 'z-index': '100'}).animate({overflow: 'visible',  width: '200%'});
    });

    $('.list').mouseleave(function(e){             
        $(this).stop().css({overflow: 'hidden', background:'', width: '140',  'z-index': '0'});
    });
});

<div id="container">
    <ul id="titlelist">
        <li class='list'>GBin1 Page view monitor Demo Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo Page view monitor Demo</li>
    </ul>

    <ul id="titlelist">
        <li class='list'>xxxxxxxxxxxxxxxxxxxxxxxxxxDemo Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
    </ul>

    <ul id="titlelist">
        <li class='list'>GBin1 Page view monitor Demo Demo Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
        <li class='list'>GBin1 Page view monitor Demo</li>
    </ul>
</div>

可以使用jsfiddle进行测试：

当鼠标悬停在第一个UL的LI上时，如何在第二个UL之上的第一个UL中使LI？

看起来它将显示在第二个UL下面，并且z-index不起作用。有什么想法吗？

Answer 1

Z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

所以你需要将static更改为relative，这不应该导致任何问题。

src，http://www.w3schools.com/cssref/pr_pos_z-index.asp

小提琴，http://jsfiddle.net/ybxfH/

Answer 2

我相信this code会更清洁，更适合你。

如何在第二次ul中首先获得li？

2 个答案: