问题是，当用户徘徊一个li时，它会使li的宽度达到屏幕的100％，所以li需要绝对定位来克服同一行上的另一个li，但是在这个列表中我想要6个或更多的孩子，当我添加其他li，它崩溃了。帮助
它必须如下所示（全屏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>
答案 0 :(得分：0)
我在纯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元素挤压到右侧而不是左侧，从而覆盖第1条规则的效果。
我希望你不介意“压缩”效果，我明白你没有要求它。
编辑：
它总是可堆叠的，这里有几个项目在彼此之上。
唯一真正添加的是悬停调整大小规则上的!important修饰符，以确保无论先前的样式规则有多具体，都会在悬停时修改大小。