首页 \ 问答 \ 段落包括通过过渡带来的div(Paragraph covers div brought through transition)

段落包括通过过渡带来的div(Paragraph covers div brought through transition)

为什么段落总是覆盖在此示例中将鼠标悬停在链接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>


Why does the paragraph always cover the div that is shown when you hover over link 1 in this example? I have tried changing the z-index of both the paragraph and the list, but nothing works. The thing that really makes me not understand is the fact that during the transition, the list appears over the paragraph. Then, after the transition, the paragraph seems to change z-index. Any help would be great.

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>


原文:https://stackoverflow.com/questions/27113338
更新时间:2019-12-07 11:46

最满意答案

Z指数取决于具有“定位”的元素。 给你的div和你的位置是这样的:

div,p {
    position: relative;
}

小提琴示例: http//jsfiddle.net/9dp7p5LL/


Z-index depends on the element having "positioning." Give your div and you p position like so:

div,p {
    position: relative;
}

Fiddle example: http://jsfiddle.net/9dp7p5LL/

2014-11-24

相关问答

更多

使用javascript中的map从两个数组创建一个数组(Create an array from two arrays using map in javascript)

对于每个人都可以在这里帮助。 看看这个JSBIN const hey = [20,40,60] const hello = [23.4, 23.5, 36.5]; let retArr = []; hey.forEach( (h, i) => retArr.push(`${h} (${hello[i]})`) ) console.log(retArr); For Each can be helpful here. Check out this JSBIN const hey = [20

Codeigniter新手:计算查询结果?(Codeigniter newbie: Count query results?)

您需要使用$query->num_rows() 。 它将返回使用您的查询返回的总行数。 例如 : $query = $this->db->query("YOUR QUERY"); if ($query->num_rows() > 0) { //DO your stuff } 有关更多参考,请参阅文档 You need to use $query->num_rows(). It will return total number of rows retur

我通过使用java代码执行sh文件时出错。sudo:没有tty存在,也没有指定askpass程序(I am getting error while executing sh file by using java code.. sudo: no tty present and no askpass program specified)

"echo "+pass+" | "+"sudo -S为我工作 我的完整代码如下所示: - String pass = "\"Yourpassword\""; out.println("echo "+pass+" | "+"sudo -S scp -i "+Pemfilepath+" -r "+targetFolder+" "+"user@xx.xxx.xx.xxx:/var/www/html/projects/demoproject"); 希望它会帮助你:)

Redux形式在OnSubmit处理程序中返回代理(Redux-form returns Proxy in OnSubmit handler)

尝试this.props.handleSubmit(values => console.log("========>", values)) 而不是values => console.log("========>", values) Try this.props.handleSubmit(values => console.log("========>", values)) instead of values => console.log("========>", values)

在SAS代码中嵌入SAS宏结果(Embed SAS Macro Results in SAS code)

似乎失败的尝试是由于额外的; 在宏调用结束时。 尝试删除它。 宏调用不需要分号。 第一个示例在宏调用之后没有分号(注意,您使用的是dataset_manager数据集两次,在%let中再次使用set语句)。 即使您删除了两个分号中的一个(第一个示例需要结束set语句),第三个示例也会起作用。 It seems that the failing attempt is due to an extra ; at the end of the macro invocation. Try removing

简单的方法来查找符合条件的数组的所有索引?(Easy way to find all indices of an array that meet a condition?)

它已经很不错了。 x使用中的不一致使得代码不易读,这就是解构有用的地方。 Array.prototype.entries()是myArray.map((x, idx) => [idx, x])的快捷方式: [...myArray.entries()] .filter(([, x]) => x > 13) .map(([idx]) => idx) It already looks pretty good. It is inconsistency in x use that makes the c

在ActionScript3中返回父函数?(Make a parent function return in ActionScript3? (or make addEventListener return))

简短的回答:放弃它,它不会以这种方式发生。 长答案:这里的事情是,你永远不想Flash Player挂起。 原因很多,但归根结底就是你总是在UI线程中操作。 像你这样的网络请求意味着你必须等待图像加载,这会在等待时挂起UI,从而烦人用户。 如果图像很小,网络效率不是问题,那么这对您来说不是问题。 但是,如果图像需要一段时间才能加载问题,那么它就是头。 另外,如果我正确记得,Flash Player对每帧的代码执行时间设置了限制,15秒。 之后,用户会弹出一个询问脚本是否应该中止的提问。 我建议你

JAVA动态列表类型(JAVA Dynamic List Type)

我注意到你在问动态属性。 不要忘记泛型实现类型擦除 。 也就是说,在运行时, List就是这样。 通用提示仅仅用于编译时。 所以你会返回一个简单的原始 List 。 它没有类型信息, List<Integer>与List<Double>完全相同。 没有理由不能实现如下接口: List<T> getList(T param); 但这是一个静态定义,你必须在你的代码库中实现特定的类型。 I note that you're asking about dynamic attributes. Don'

相关文章

更多

最新问答

更多
  • asp.net任意用户信息(asp.net arbitrary user info)
  • 如何使用python计算docx文件中表中行的值(How to count the row's values in tables in docx file by using python)
  • MySQL:用户访问和数据库覆盖(MySQL: User access and DB overwriting)
  • 还有另一种“使用未分配的局部变量”的问题(Yet Another “Use of unassigned local variable 'whatever' ” question)
  • 开源证书颁发机构软件(Open source certificate authority software)
  • Rails中的迭代form_for是在create上添加模型的所有实例(Iteration in Rails form_for is adding all instances of model on create)
  • 如何扩展我的表视图单元格?(How to expand my table view cell?)
  • 如何使用SPARQL区分Thing和无生命对象(How to differentiate between a Thing and an inanimate object with SPARQL)
  • 在IdentityServer中,Client Secrets和Scope Secrets有什么区别?(In IdentityServer, what is the difference between Client Secrets and Scope Secrets?)
  • 如何在具有附加类时重写类(How do I override a class when it has a attached class)
  • 如何使用Git在Azure上部署C#,MVC4应用程序(How to deploy a C#, MVC4 application on Azure using Git)
  • Sitecore 7内容搜索爬网程序根目录之外的索引项(Sitecore 7 Content Search indexing items outside of crawler root)
  • 我应该在线课程使用utf-8编码吗?(Should I use utf-8 encoding for an online course?)
  • 如何在Cucumber-JS步骤定义中使用Node-mysql连接到MySQL?(How to connect to MySQL using Node-mysql in a Cucumber-JS step definition?)
  • 在MVC 4中的google.maps.LatLng(lat,lon)中将JSON字符串值分配给纬度和经度(Assign the JSON string value to Latitude and Longitude in google.maps.LatLng(lat,lon) in MVC 4)
  • awk:通过特定的分隔符删除字符串(awk: remove strings by specific delimiter)
  • 如何测试Vista的应用程序(How to test app for Vista)
  • Elasticsearch聚合器 - 缺失值的工作原理(Elasticsearch aggregators - How missing values work)
  • 绘制datetime.date熊猫(Plot datetime.date pandas)
  • PostgreSQL作为WSO2 EI和APIM + IS的数据源(PostgreSQL as datasource for WSO2 EI and APIM+IS)
  • 如何使用bash在postgres中运行alter table脚本(How to run alter table script in postgres using bash)
  • 可能使用PHP阻止整个美国州访问我的网站?(Might it be possible to block an entire US state from accessing my site, using PHP?)
  • restangular删除并输入错误网:: ERR_NAME_NOT_RESOLVED(restangular remove and put error net::ERR_NAME_NOT_RESOLVED)
  • 常见问题解答的Modx(Revolution)搜索功能(Modx(Revolution) search function for FAQs)
  • Rubymine如何使用远程口译员和Git?(How Does Rubymine Work With Remote Interpreters and Git?)
  • prepareForSegue和PerformSegueWithIdentifier发件人(prepareForSegue and PerformSegueWithIdentifier sender)
  • postgrsql与PowerShell无提示安装问题(postgresql silent installation issue with powershell)
  • 比较两个greps的输出(Comparing output from two greps)
  • 使用.NET RIA Data Services删除Silverlight 3中的数据(Deleting data in Silverlight 3 with .NET RIA Data Services)
  • 此行中AND运算符的含义(meaning of the AND operator in this line)