悬停时显示 div答案

【问题标题】：Show div upon hover悬停时显示 div
【发布时间】：2014-04-14 18:27:23
【问题描述】：

我想在悬停文本框时显示一个像菜单一样的 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 应该会显示，但它没有发生

【问题讨论】：

为我工作jsfiddle.net/B7m9j
您的 html 不完整，() 工作正常，小心您的 html，缺少可能是您在某些浏览器中的错误的根源，在那里尝试@ 987654322@
出于某种原因，如果您需要任何关于此的信息而不是stackoverflow.com/a/16479686/1542290我的回答......
使用 javascript onmouseover="" 触发切换可见性的事件...这将允许您从 .search 元素调用它。

标签： javascript html css

【解决方案1】：

您不能将鼠标悬停在未显示的节点上。 display:none -> 它不在您的页面上。所以，你不能悬停在这个上面。同样适用于隐藏但是，我们可以更改其他属性。例如，

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

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

【讨论】：