修复列表的绝对位置(li's隐藏在前两个后面)
Fix list absolute positioning (li's are hidden behind first two)
问题是,当用户悬停在一个li上时,它使li的宽度达到屏幕的100%,因此li需要绝对定位才能越过同一行上的另一个li,但在这个列表中,我想要6个或更多的子,当我添加其他li时,它会崩溃。帮助
它一定是这样的(全屏50%宽李)https://i.stack.imgur.com/DP0Wd.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>
我在纯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功能;CCD_ 16是"通用同级选择器"并选择某个元素之后的所有元素。此规则只告诉悬停元素右侧的所有li
元素向右挤压,而不是向左挤压,覆盖第一条规则的效果。
我希望你不要介意"压缩"效应,我知道你没有要求它。
编辑:它总是可以堆叠的,这里有几个物品叠在一起。唯一真正添加的是悬停调整大小规则上的!important
修饰符,以确保无论以前的样式规则多么具体,大小都会在悬停时进行修改。
https://jsfiddle.net/gershy/s3668f8h/
- 修复列表的绝对位置(li's隐藏在前两个后面)
- 两个提交按钮(一个隐藏,一个可见)
- 将两个隐藏输入与简单的 JavaScript 进行比较失败
- 切换两个隐藏单选按钮的最佳方式是什么
- 将两个图像合并为一个,并使用javascript进行溢出隐藏
- 根据两个下拉菜单的选择设置隐藏值
- 单击一个按钮时,如何隐藏两个按钮
- 如何使菜单容器在悬停两个元素以外的所有元素时隐藏
- 单击页面上的任意位置时隐藏两个元素
- 单击编辑按钮时,如何根据另外两个文本框的条件隐藏或禁用单选按钮列表和文本框
- 使用两个或多个按钮在单个DIV中显示/隐藏和替换文本
- CSS/Javascript/Jquery:显示/隐藏 DIV 取决于单击的两个图像之一
- jQuery可排序与溢出:隐藏;在两个列表之间
- 如何创建一个包含两个按钮但其中一个被隐藏的登录页面
- JavaScript 侦听两个单选按钮响应并显示隐藏的文本框
- 如何使用两个单选按钮使显示隐藏两个文本框
- JavaScript代码,当在HTML中单击一个按钮时,两个按钮隐藏
- 如何通过jQuery隐藏两个特定id之间的内容
- 通过单击锚显示和隐藏两个图标
- 在开始时隐藏两个按钮,当单击另一个按钮时,显示两个按钮