如何用z-index隐藏选择选项？

Question

这是小提琴 。

正如你所看到的select是postioned落后，一旦你悬停的一个选项，以显示更多的面板不过，如果select被点击时透露option ，然后将鼠标移到面板再次徘徊中， select定位背后正常不过遗体option是在前面。 我一直试图用z-index覆盖它，但它不起作用，或者我在其他地方遇到问题。 有没有办法用z-index修复它？

片段也是：

 body { font-family: Arial; height:100%; margin: auto; vertical-align: middle; } a { text-decoration: none; } option { z-index: -1; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family:inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover > ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover > ul { opacity: 1; top: 100%; visibility: visible; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; z-index: 9999; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size:15px; color:black; } #version { font-style: italic; color:black; font-size: 15px; position: absolute; top: 0; left:90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color:black; } 

 <nav> <ul> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px' > Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <div style="width:400px; display: inline-block;"></div> <select> <option>hello world</option> </select> 

Answer 1

有两种方法可以做到这一点：

方法1：

将select放入div中并应用一条规则，当您将鼠标悬停在导航栏上时，select的焦点应该消失。

nav:hover ~ .selecthack > select:focus{
    display:none;    
}

方法2：使用一些jQuery

1. 首先在之前添加jQuery库的链接：

2. 现在在标记之前添加此代码：

   $（function（）{$（'nav'）。hover（function（）{$（'select'）。blur（）;}）}）

 $(function() { $('nav').hover(function() { $('select').blur(); }) }) 

 body { font-family: Arial; height: 100%; margin: auto; vertical-align: middle; } a { text-decoration: none; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family: inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover>ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover>ul { opacity: 1; top: 100%; visibility: visible; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0, 0, 0, .2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size: 15px; color: black; } #version { font-style: italic; color: black; font-size: 15px; position: absolute; top: 0; left: 90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color: black; } #Title { vertical-align: top; display: inline-block; font-size: 20px; display: inline-block; text-align: center; width: 200px; z-index: -1; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray; } #TopPanel { border-bottom: 2px solid #C2082F; width: 1889px; z-index: -1; } #buttons { height: 30px; width: 30px; border: 2px gray outset; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } #buttons:hover { background-color: gray; } #ButtonsTable { background-color: white; font-weight: bold; width: 100px; height: 30px; font-size: 15px; border: 1px gray outset; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } #ButtonsTable:focus { outline: 0; } #ButtonsTable:hover { background-color: gray; cursor: pointer; } #Trova1 { display: inline-block; width: 120px; margin-right: 20px; background-color: white; color: black; font-size: 12px; margin-top: 10px; margin-left: 50px; padding: 5px; } .TrovaSelect { width: 200px; margin-top: 10px; margin-left: 15px; padding: 5px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .TrovaSelect:focus { outline: 0; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #SmallButton { height: 15px; width: 15px; border: 2px gray outset; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; } #SmallButton:hover { background-color: gray; } #afix { height: 0px; width: 0px; } .selecthack { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <div style='width:400px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px'> Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <?php include_once '/Main/FunctionsBar.php' ?> <div style="display:inline-block; width: 800px;"></div> <div id="Title" style="display:inline-block;">Ricerca sinistri</div> <div id='TopPanel'> <span id='Trova1' style="border-bottom: 1px solid gray"> Trova per luogo </span> <div class="selecthack"> <select class='TrovaSelect'> <option hidden></option> <option value='Lugano'> Lugano </option> </select> </div> <span id='Trova1' style="border-bottom: 1px solid gray"> Trova no. Pratica </span> <select class='TrovaSelect'> <option hidden></option> <option value='1'> 1 </option> </select> <span style="margin-left:100px;"></span> <a href="http://sinistri.ecsa.ch/MainPanel.php?pagina=/Sinistri/TopPanel.php&pagina2=/Sinistri/RicercaSinistro.php"> <button id="ButtonsTable"> Pannelli </button> </a> <span style="margin-left: 50px;"></span> <a href="http://sinistri.ecsa.ch/MainPanel.php?pagina=/Sinistri/TopPanel.php&pagina2=/Sinistri/InterrogazioneIncidentiLuogoOAutore.php"> <button id="ButtonsTable"> Tabelle </button> </a> <span style="margin-left: 50px;"></span> <a href="http://sinistri.ecsa.ch/Sinistri/PDFphp/SegnalazioneIncidenti-PDF.php"> <button id="ButtonsTable" style="width: 130px;"> Sinistri pdf </button> </a> <br> <span id='Trova1' style="border-bottom: 1px solid gray"> Trova per data </span> <select class='TrovaSelect'> <option hidden></option> <option value='23.07.2016'> 23.07.2016 </option> </select> <br> <br> </div> <div id="format"> <?php if (isset($_GET['p']) && $_GET['p'] == "InterrogazioneIncidentiLuogoOAutore") { include('InterrogazioneIncidentiLuogoOAutore.php'); } ?> </div> 

Answer 2

当li得到悬停时，刚好足够移除select元素的focus 。因此，移除焦点使用blur功能。

$(document).ready(function(){
  $('ul:first-child > li').hover(function(){
    $('select').blur();
  })
})

 $(document).ready(function(){ $('ul:first-child > li').hover(function(){ $('select').blur(); }) }) 

 body { font-family: Arial; height:100%; margin: auto; vertical-align: middle; } select { position: relative; left: 0; transition: all 500ms linear; } a { text-decoration: none; } option { z-index: -1; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family:inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover > ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover > ul { opacity: 1; top: 100%; visibility: visible; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; z-index: 9999; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size:15px; color:black; } #version { font-style: italic; color:black; font-size: 15px; position: absolute; top: 0; left:90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color:black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <nav> <ul> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px' > Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <div style="width:400px; display: inline-block;"></div> <select> <option>hello world</option> </select> 

Answer 3

删除z-index：9999; 从

ul li {
 display: inline-block;
 position: relative;
 font-size: 25px;
 background-color: #C2082F;
 cursor: pointer;  
}

添加z-index：9999; 至

ul li:hover > ul {
 opacity: 1;
 top: 100%;
 visibility: visible;
 z-index: 9999;
}

试试以下代码：

 body { font-family: Arial; height:100%; margin: auto; vertical-align: middle; } a { text-decoration: none; } option { z-index: -1; } nav { display: table; margin: 0; width: 100%; background-color: #C2082F; } ul { margin: 0; padding: 0; width: 100%; list-style: none; } textarea { font-family:inherit; font-size: inherit; } ul ul { opacity: 0; position: absolute; top: 160%; visibility: hidden; transition: all .4s ease; -webkit-transition: all .4s ease; } ul ul ul { top: 0; right: 160%; } ul ul li:hover > ul { top: 0%; right: 100%; opacity: 1; visibility: visible; } ul li:hover > ul { opacity: 1; top: 100%; visibility: visible; z-index: 9999; } ul li { display: inline-block; position: relative; font-size: 25px; background-color: #C2082F; cursor: pointer; } ul ul li { width: 100%; font-size: 18px; } ul a { text-decoration: none; display: block; color: white; padding: 16px; width: auto; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,.2); } ul li:hover { background-color: gray; } ul li a:hover { background-color: gray; } span.dropBottom, span.dropRight { display: block; box-shadow: inset 5px 0px 0px black; position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; } span.dropBottom { box-shadow: inset 0px 0px 0px black; position: absolute; width: 100%; bottom: 0px; } #note { margin-bottom: 15px; margin-left: 20px; padding-top: 10px; padding-bottom: 18px; position: absolute; top: 0; right: 45%; width: 17%; text-align: center; font-size:15px; color:black; } #version { font-style: italic; color:black; font-size: 15px; position: absolute; top: 0; left:90%; padding-right: 30px; padding-bottom: 10px; } #format { height: 100%; margin-left: 15px; margin-right: 25px; color:black; } 

 <nav> <ul> <div style='width:100px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px' > Sinistri </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento sinistri </a> </li> <li> <a href="#"> Ricerca sinistro </a> </li> <li> <a href="#"> Rapporti sinistri </a> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li style='width: 250px;'> <a href="#"> Assicurazioni </a> <span class="dropBottom"> </span> <ul> <li> <a href='#'> Polizze gruppo </a> </li> <li> <a href="#"> Veicoli </a> <span class="dropRight"> </span> <ul> <li> <a href="#"> Inserimento veicoli </a> </li> <li> <a href="#"> Ricerca veicoli </a> </li> </ul> </li> </ul> </li> <div style='width:20px; display:inline-block; min-height: 1px;'></div> <li> <a href="#" style='width: 250px;'> Contratti </a> <span class="dropBottom"> </span> <ul> <li> <a href="#"> Inserimento contratti </a> </li> <li> <a href="#"> Ricerca contratti </a> </li> </ul> </li> </ul> </nav> <div style="width:400px; display: inline-block;"></div> <select> <option>hello world</option> </select>