javascript - Show div upon hover -


i want show div menu upon hovering text box reason not showing .

here css

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

here 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 something?"/>                <input type="submit" id="searchbutton" value="go"/>               </form>            </div>          </li>        </ul>      </div> 

all want on hovering on search #search_drop should shown not happening

you cannot hover on non-displayed node. display:none -> not on page. so, cannot hover on this. same applies hidden but, can alter other properties. example,

#search {  border : 1px green solid; } #search:hover {  border : 5px red solid; }  <div id="search"> abcdefgh abcdefgh abcdefgh </div> 

Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -