懸停顯示div

Question

我想在懸停文本框時顯示類似於菜單的div，但是由於某種原因它沒有顯示。

這是我的CSS

     .search:hover  #search_drop {
    display:block;
 }


     #search_drop {
        display:none;
        height:500px;
        width:500px;
        background:#000;
        position:absolute;
        top:0px;
     }

這是HTML

     <div id="navigation_s" style="float:left">
       <ul >
         <li > 
           <div class="search">
             <div id="search_drop"> test </div>
              <form action="" id="searchform">
               <input type="text" name="search" id="searchbox" placeholder="looking for something?"/>
               <input type="submit" id="searchbutton" value="go"/>
              </form>
           </div>
         </li>
       </ul>
     </div>

我要做的只是將鼠標懸停在搜索上，應該顯示#search_drop，但沒有發生

Answer 1

您無法將鼠標懸停在未顯示的節點上。 display:none >它不在您的頁面上。 因此，您不能在此上懸停。 同樣適用於隱藏，但是，我們可以更改其他屬性。 例如，

#search {
 border : 1px green solid;
}
#search:hover {
 border : 5px red solid;
}

<div id="search">
abcdefgh
abcdefgh
abcdefgh
</div>