- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
问题是,当用户悬停一个 li 时,它会使 li 的宽度达到屏幕的 100%,因此 li 需要绝对定位才能越过同一行上的另一个 li,但在这个列表中我想要 6 个或更多的 child ,当我添加其他李,它崩溃了。帮助。
它必须看起来像这样(全屏 50% 宽度 li's)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>
最佳答案
我用纯 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
应该延伸到它的父级(并获得比它的 sibling 更高的 z-index
,以防万一)
第三条规则是很酷的部分,它使用了一个我几乎不必使用的 css 特性; ~
是“通用兄弟选择器”,它选择某个元素之后的所有元素。此规则仅告诉悬停元素右侧的所有 li
元素挤压到右侧而不是左侧,覆盖第一条规则的效果。
希望您不要介意“压缩”效果,我知道您没有要求。
编辑:它一直是可堆叠的,这里是几件元素叠放在一起。唯一真正添加的是悬停调整规则的 !important
修饰符,以确保无论以前的样式规则多么具体,悬停时都会修改大小。
关于javascript - 修复列表绝对定位(li 隐藏在前两个后面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29351531/
前一段时间写过一篇文章《 实战,一个高扩展、可视化低代码前端,详实、完整 》,得到了很多朋友的关注。 其中的逻辑编排部分过于简略,不少朋友希望能写一些关于逻辑编排的内容,本文就详细讲述一下逻辑
我正在尝试以下 Java 片段: int[] testArray={10,20,30,40}; int i= 0; testArray[i++]= testArray[i++]+1; System.o
我想知道我是否可以通过某种方式在 C++ 中进行前/后函数调用。我有一个包含很多函数的包装器类,在每次调用包装器函数后,我应该调用另一个始终相同的函数。 所以我不想像这样对每个函数调用 postFun
我有一个像这样的头文件: #pragma once #include "gamestate.h" #include "ExitListener.h" class InitialGameState :
学习左值和右值。定义是任何可以是“地址”的东西都是左值,否则就是右值。 我检查了运算符的优先级,前缀和后缀增量都比“地址”运算符具有更高的优先级。 对于下面的两个例子,谁能解释一下为什么第一个“&++
在我的学习过程中,我遇到了前后迭代器,我想知道是否有办法让它们就地创建容器元素。从文档来看,容器似乎需要实现 push_back 函数才能与 back_iterator 一起使用。但是有没有一种方法可
我有两个关于 Java 中运算符优先级的类似问题。 第一个: int X = 10; System.out.println(X++ * ++X * X++); //it prints 1440 根据
请放轻松,不要对我开枪,因为我还是新手。 当我运行这段代码时,我完全糊涂了,终生无法弄清楚为什么: int y = 9; cout << "++y = " << ++y << "\n--y = " <
两种表达方式有区别吗: (*x)++ 和 ++(*x) 我可以看到这两个语句都替换了 *x 中 (*x+1) 的内容。但是它们之间有什么区别吗? 最佳答案 (*x)++ 计算为*x的值;作为副作用,*
我有一个如下所示的数据集: Date CONSUMER DISCR CONSUMER STAPLES ENERGY FINANCIALS HEALTH CARE
我希望检查名称字段中输入的前两个字符是否为字母 - 除此之外没有什么区别(空格、'、- 等都是公平的游戏)。这是我到目前为止所拥有的,但它不起作用。想法?谢谢! if (document.form01
我制作了一个简单的脚本,为像素和所有附近的像素着色为相同的颜色 Click foto
我需要编写一个循环,以下列格式输出从昨天算起的最近 30 天: 2014-02-02 2014-02-03 2014-02-04 ... 2014-03-04 我想我需要像这样使用循环: for ($
我正在做一些练习,但我对这个感到困惑: public static int f (int x, int y) { int b=y--; while (b>0) { if (x%2!=0
我需要一个 4 个字符的正则表达式。前 3 个字符必须是数字,最后 1 个字符必须是字母或数字。 我形成了这个,但它不起作用 ^([0-9]{3}+(([a-zA-Z]*)|([0-9]*)))?$
我需要编写一个循环,以下列格式输出从昨天算起的最近 30 天: 2014-02-02 2014-02-03 2014-02-04 ... 2014-03-04 我想我需要像这样使用循环: for ($
我有下面的程序,我试图找到前 1000 个素数的总和。在代码中,解决方案1和2有什么区别?为什么我不应该将 count 变量放在 if 条件之外?如果我把变量放在 if 之外,我显然没有得到我需要的答
这个问题在这里已经有了答案: Replace First N Occurrences in the String (7 个答案) 关闭 4 年前。 我有一个如下的字符串 const str = '_
我正在尝试测量以纳秒为单位的平均访问延迟,但在第一次迭代后我收到“段错误(核心转储)”。我错过了什么吗?我是否滥用了指针。这是导致错误的函数: #include #include #include
我有一个 SQL 问题 (MySQL)。我如何从下表创建一个新表(表名称:“well_master_prod_inj”)。 我需要按井名和日期聚合数据。我希望每个井名只有一行数据以及显示以下数据的列:
我是一名优秀的程序员,十分优秀!