如何用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>