因此,在我正在制作的页面上,我有一个菜单栏和一个在悬停时改变颜色的黑框。当我尝试打开菜单并将鼠标移到黑框上(仍在下拉列表的边界中)时,下拉菜单消失并且调用黑框:悬停选择器。
基本上,当 :hover 位于元素后面时就会被检测到。我尝试搜索,但我得到的唯一结果是如何强制它检测元素后面。我想阻止这种情况发生。
重要的 HTML:
<div class="menuBar">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>
</li>
<li><a href="#">Home 2</a>
<ul>
<li><a href="#">Item 1</a></li>
</ul>
</li>
</ul>
</div> <!--End menu bar-->
<div class="center">
<div class="buttonGroup">
<div class="buttonMain">
<p class="hover">Plot</p>
<p class="show title">Plot</p>
<a class="show inFront" href="#">Test</a>
</div>
</div>
</div>
菜单栏.css:
.menuBar {
height: 50px;
width: auto;
background-color: #E9523F;
border-radius: 5px;
box-shadow: 0px 0px 10px #DA281F;
z-index: 10000;
}
.menuBar ul {
padding: 0;
list-style-type: none;
positoin: relative;
}
.menuBar ul li {
float: left;
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
border-radius: 5px;
}
.menuBar ul ul {
visibility: hidden;
position: absolute;
width: 80px;
border-radius: 0pxx 5px;
}
.menuBar ul ul li{
width: 80px;
height: 50px;
float: none;
position: relative;
}
.menuBar ul li a {
text-decoration: none;
color: #FAE12D;
text-align: center;
width: 80px;
line-height: 50px;
margin: 0;
padding: 0;
font-size: 17pt;
height: 50px;
display: block;
font-weight: 800;
}
.menuBar ul li:hover ul {
background-color: #DA281F;
box-shadow: 0px 0px 10px #DA281F;
}
.menuBar ul li:hover {
background-color: #DA281F;
box-shadow: 0px 0px 10px #DA281F;
}
.menuBar ul li:hover ul {
visibility: visible;
}
.menuBar ul li li:hover {
background-color: #FE3845;
}
按钮.css
.buttonMain {
height: 400px;
width: 400px;
background-color: #000;
float: left;
margin-left: 20px;
margin-right: 20px;
line-height: 400px;
}
.buttonGroup {
height: 500px;
}
.buttonMain .hover {
position: absolute;
width: inherit;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: center;
overflow: show;
color: #FFF;
}
.buttonMain .show {
position: absolute;
width: inherit;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: center;
overflow: show;
color: #FFF;
background-color: #AAF;
opacity: 0;
}
.buttonMain:hover .show {
opacity: 1;
}
.buttonMain:hover .hover {
opacity: 0;
}
.inFront {
background-color: transparent !important;
}
.title {
line-height: normal !important;
text-decoration: underline;
font-size: 30pt;
font-weight: 600;
}
最佳答案
z-index
将执行如下操作
.menuBar ul {
padding: 0;
list-style-type: none;
position: relative; // Just changed the spelling of position
z-index:1000; // Added
}
关于css - :hover selector being detected even when behind another element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27577006/