修复列表绝对定位（li隐藏在前两个之后）

Question

问题是，当用户将一个li悬停时，它会使li的宽度变为屏幕的100％，因此li需要绝对定位来越过同一行上的另一个li，但是在此列表中，当我添加另一个li时，我想要6个或更多的孩子李的，它崩溃了。 救命。

它必须看起来像这样（全屏显示50％宽度为li） http://i.imgur.com/dRb92rK.gif

的jsfiddle：

https://jsfiddle.net/shotamickaia/pp658v6j/

 $(function(){ $('.leftchild').hover(function(){ $('.left').css("z-index", "2"); $('.left').css("width", "100%"); },function(){ $('.left').css("z-index", "0"); $('.left').css("width", "50%"); }); $('.rightchild').hover(function(){ $('.right').css("z-index", "2"); $('.right').css("width", "100%"); },function(){ $('.right').css("z-index", "0"); $('.right').css("width", "50%"); }); function getCurrentScroll() { return window.pageYOffset; } }); $(document).ready(function() { function setSettings() { windowWidth = $(window).width(); windowHeight = $(window).height(); width = (((50 * windowWidth) / 100)*50) / 100; marginleft = ((((50 * windowWidth) / 100)*50) / 100) / 2; margintop = (((50 * windowHeight) / 100)*50) / 100; numitems = $(".slides li").length; var myheight = (numitems * 75); $('.leftchild').css('width', width); $('.leftchild').css('marginLeft',marginleft); $('.leftchild').css('marginTop',margintop); $('.rightchild').css('width', width); $('.rightchild').css('marginRight',marginleft); $('.rightchild').css('marginTop',margintop); }; setSettings(); $(window).resize(function() { setSettings(); }); }); 

 body,html { margin:0; padding:0; height:100%; background: white; } #reasons { width: 100%; float: left; margin: 0; height: auto; padding: 0; background: #f7f2ee; } .slides { list-style-type: none; padding: 0; width: 100%; height: 100%; position: relative; margin: 0; } .slides li { height: 100vh; width: 50%; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; float: left; transition: all .4s linear; position: absolute; width: 100%; z-index: 0; } .slides li:nth-child(even) { z-index: 1; background-attachment: cover; width: 50%; right: 0; } .slides li:nth-child(even) summary { width: 300px; margin-right: 200px; color: white; text-align: center; float: right; } .slides li:nth-child(3) { margin-top: 50%; } .slides li summary { color: white; float: left; text-align: center; cursor: default; } .slides li summary h2 { font-family: 'Proxima Nova Bold'; font-size: 48px; text-transform: uppercase; letter-spacing: 20px; margin: 10% 0; } .slides li summary p { width: 100%; font-size: 16px; text-align: center; font-family: 'Andada'; font-weight: normal; font-style: italic; opacity: 0.95; padding: 0; margin: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="reasons"> <div class="slider"> <ul class="slides"> <li class="left" style="background-image: url(content/test1.jpg); background-color:black;"> <summary class="leftchild"> <h2>Test 1</h2> <p>Test description</p> </summary> </li> <li class="right" style="background-image: url(content/test2.jpg); background-color:red;"> <summary class="rightchild"> <h2>TEST 2</h2> <p>Test description</p> </summary> </li> <li class="left" style="background-image: url(content/test3.jpg); background-color:black;"> <summary class="leftchild"> <h2>Test 3</h2> <p>Test description</p> </summary> </li> <li class="right" style="background-image: url(content/test4.jpg); background-color:red;"> <summary class="rightchild"> <h2>TEST 4</h2> <p>Test description</p> </summary> </li> <li class="left" style="background-image: url(content/test5.jpg); background-color:black;"> <summary class="leftchild"> <h2>Test 5</h2> <p>Test description</p> </summary> </li> <li class="right" style="background-image: url(content/test6.jpg); background-color:red;"> <summary class="rightchild"> <h2>TEST 6</h2> <p>Test description</p> </summary> </li> <li class="left" style="background-image: url(content/test7.jpg); background-color:black;"> <summary class="leftchild"> <h2>Test 7</h2> <p>Test description</p> </summary> </li> <li class="right" style="background-image: url(content/test8.jpg); background-color:red;"> <summary class="rightchild"> <h2>TEST 8</h2> <p>Test description</p> </summary> </li> <li class="left" style="background-image: url(content/test9.jpg); background-color:black;"> <summary class="leftchild"> <h2>Test 9</h2> <p>Test description</p> </summary> </li> <li class="right" style="background-image: url(content/test10.jpg); background-color:red;"> <summary class="rightchild"> <h2>TEST 10</h2> <p>Test description</p> </summary> </li> </ul> </div> </section> 

Answer 1

我在纯CSS / HTML中解决了这个问题！ 唯一令人烦恼的一点是，您需要为每个列表项使用css声明来设置其初始宽度。

我使用css的left和right属性而不是width ，因为我发现这使事情变得容易得多。

检查一下： https : //jsfiddle.net/gershy/k16mcgkb/2/

这个想法是所有li元素都绝对定位，占据了所有垂直空间和一部分水平空间。 当li悬停时，其left和right都设置为0（一直延伸到其父级）。

您还会注意到，这还有一个很好的效果，即悬停的对象两侧的li元素都被压缩了。 这很重要，因为它有助于避免任何z-index困难。

这是处理此问题的CSS（这是最复杂的部分）：

ul:hover > li {
    left: 0; right: 100%;
}

ul > li:hover {
    left: 0; right: 0;
    z-index: 2;
}

ul > li:hover ~ li {
    left: 100%; right: 0;
}

第一条规则说，当ul悬停时，所有li元素都需要向左侧挤压（ left: 0; right: 100%;告诉元素在其父元素的左侧宽度为0）。

第二条规则说，被悬停的特定li应该在其父对象上延伸整个路径（并且以防万一，获得比其同级更高的z-index ）

第三个规则是很酷的部分，它使用了我几乎不用的CSS功能； ~是“通用同级选择器”，它选择某个元素之后的所有元素。 此规则仅告诉位于悬停元素右侧的所有li元素向右侧而不是向左侧挤压，从而覆盖第一个规则的效果。

我希望您不要介意“压缩”效果，我知道您并没有要求它。

编辑：它一直是可堆叠的，在这里它彼此之间有几个项目。 唯一真正添加的是悬浮大小调整规则上的!important修饰符，以确保无论以前的样式规则有多具体，都可以在悬浮时修改大小。

https://jsfiddle.net/gershy/s3668f8h/