作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在彼此内部有 2 个 Div,内部 div 有 z-index:2,当鼠标悬停在 Div Submenu 上并且主 div 有 z-index:1 时会显示,但是当我将鼠标移到 Submenu 上时内部 div 在主 div 下打开,我该怎么办?谢谢
<div id="Menu" style="top:0px;left:121px;width:170px;display:inline-block;;position:absolute;z-index:1;">
<div onmouseover="stayedIn=true;document.getElementById('SubMenu').style.display = 'inline-block';" onmouseleave="stayedIn=false;setTimeout(function(){if(stayedIn==false) {document.getElementById('SubMenu').style.display = 'none';}}, 300);" style="cursor:pointer;background-color:#10406e;height:20px;width:100%;color:white;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
SubMenu
<div style="float:right;display:inline-block;margin-top:5px;margin-right:5px;"><img border="0" src="../../<?php if($_SERVER['HTTP_HOST']=='localhost') echo 'worldnewsmaster/';?>images/small_right_arrow.png"></div>
</div>
<div id="SubMenu" onmouseover="stayedIn=true;" onmouseleave="stayedIn=false;setTimeout(function(){if(stayedIn==false) {document.getElementById('SubMenu').style.display = 'none';}}, 300);" style="top:0px;left:170px;width:120px;display:none;position:absolute;z-index:2;">
<div style="height:20px;width:100%;color:white;background-color:#1864ad;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
Submenu1
</div>
<div style="height:20px;width:100%;color:white;background-color:#1864ad;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
Submenu2
</div>
</div>
<div style="height:20px;width:100%;color:white;background-color:#10406e;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
1
</div>
</div>
<div id="Menu2" style="top:0px;left:291px;width:170px;display:inline-block;;position:absolute;z-index:1;">
<div style="height:20px;width:100%;color:white;background-color:#10406e;border:1px solid #3994c1;padding-top:7px;padding-bottom:7px;display:inline-block;">
1_2
</div>
</div>
最佳答案
您需要将 z-index 属性添加到子菜单文本 div 标签而不是带有“id= menu”的 div,因为此 div 还包含悬停 div 的内容。
您的代码将是:
子菜单 图片/small_right_arrow.png"> 子菜单1 子菜单2 1个关于html - z-index 不适用于 subDiv,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33561369/
我在彼此内部有 2 个 Div,内部 div 有 z-index:2,当鼠标悬停在 Div Submenu 上并且主 div 有 z-index:1 时会显示,但是当我将鼠标移到 Submenu 上时
我有一个 div,它由一个图像和一个位于图像下方的描述框组成。图片应该占 parent 高度的2/3,而描述占高度的三分之一。整个 div 占据了屏幕宽度的 30%,两个子元素都跨越了父元素的宽度。图
safsdghfghjghjkhkhjkhjkklhjkjh 如何使图像适合 div 并使文本适合 div 并使所
这就是我想要得到的: 到目前为止我有: #row1 {margin-top: 15px; margin-bottom: 5px; overflow: hidden; border-bottom: 1p
我是一名优秀的程序员,十分优秀!