个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
为什么当您将鼠标悬停在 this example 中的链接 1 上时，该段落总是覆盖显示的 div ？我尝试更改段落和列表的 z-index，但没有任何效果。真正让我不明白的是，在过渡期间，列表出现在段落上方。然后，在过渡之后，该段落似乎改变了 z-index。任何帮助都会很棒。
div {
background-color: #BFBFBF;
height: 50px;
width: 100%;
z-index: 1;
}
.NavList {
list-style: none;
margin: 0;
padding: 0;
}
.NavListItem {
display: inline-block;
text-align: center;
float: left;
}
.NavListItem:Hover .NavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #7F7F7F;
transition: background-color .5s;
}
.NavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #404040;
transition: background-color .5s;
}
.NavListItem:Hover .SubNavList {
display: block;
list-style: none;
margin: 0;
padding: 0;
opacity: 1;
z-index: 100;
transition: opacity 5s;
}
.NavListItem:Hover .SubNavListItem {
display: block;
text-align: center;
}
.NavListItem:Hover .SubNavLink {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #7F7F7F;
transition: background-color .5s;
}
.NavListItem:Hover .SubNavLink:Hover {
display: block;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: #BFBFBF;
text-decoration: none;
background-color: #404040;
transition: background-color .5s;
}
.SubNavList {
display: block;
width: 0px;
height: 0px;
opacity: 0;
transition: opacity 5s;
z-index: 100;
}
.SubNavListItem {
display: none;
}
p {
z-index: -1;
}<body>
<div>
<ul class="NavList">
<li class="NavListItem">
<a href="#" class="NavLink">Home</a>
</li>
<li class="NavListItem">
<a href="#" class="NavLink">Link 1</a>
<ul class="SubNavList">
<li class="SubNavListItem">
<a href="#" class="SubNavLink">SubLink 1</a>
</li>
<li class="SubNavListItem">
<a href="#" class="SubNavLink">SubLink 2</a>
</li>
</ul>
</li>
<li class="NavListItem">
<a href="#" class="NavLink">Link 2</a>
<ul class="SubNavList">
<li class="SubNavListItem">
<a href="#" class="SubNavLink">SubLink 3</a>
</li>
<li class="SubNavListItem">
<a href="#" class="SubNavLink">SubLink 4</a>
</li>
</ul>
</li>
<li class="NavListItem">
<a href="#" class="NavLink">Link3</a>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet</p>
</body>最佳答案
Z-index 取决于具有“定位”的元素。像这样给你的 div 和你的 p 位置:
div,p {
position: relative;
}
fiddle 示例:http://jsfiddle.net/9dp7p5LL/
关于html - 段落覆盖了过渡带来的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27113338/
26
4
0
当我为我的项目运行“mvn dependency:tree”时，它显示如下: [INFO] --- maven-dependency-plugin:2.8:tree (default-cli) @ x
我调用 ajax 的脚本 function search_func(value) { $.ajax({ type: "GET", url: "sample.php
我正在使用 SIM 安装 Sitecore 8.1，但在打开启动板时，由于 ajax 请求返回 HTTP 500 错误，出现了几个 Javascript 错误。查看开发人员工具会显示以下消息: htt
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我有一张 table : +-----------+-------------+------+-----+---------+-------+| Field | Type | N
所以，我对这个阵列很生气，第 2 天让我感到疼痛 *.... 我正在开发面向对象的 PHP 脚本。 我得到一个数组: Array ( [0] => Project Object ( [project_
我正在尝试将我的一个 Rails 项目升级到 Ruby 1.9.2。一切进展顺利，但一个 RSpec 测试失败了。在这个测试中，我需要一个Ruby lib: # file spec/models/my
我可以使用 Maven 的插件 spring-boot:run 运行 Spring Boot，但是当我尝试执行打包的 jar 时，它给出: Error creating bean with name
我是一名优秀的程序员,十分优秀！