[英]Show div upon hover
I want to show a div like a menu upon hovering an text box but for some reason it is not showing up . 我想在悬停文本框时显示类似于菜单的div,但是由于某种原因它没有显示。
Here is my css 这是我的CSS
.search:hover #search_drop {
display:block;
}
#search_drop {
display:none;
height:500px;
width:500px;
background:#000;
position:absolute;
top:0px;
}
here is the html 这是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>
All I want to do is on hovering over search the #search_drop should be shown but it is not happening 我要做的只是将鼠标悬停在搜索上,应该显示#search_drop,但没有发生
You cannot hover on a non-displayed node. 您无法将鼠标悬停在未显示的节点上。
display:none
-> It is not on your page. display:none
>它不在您的页面上。 So, you cannot hover on this. 因此,您不能在此上悬停。 same applies for hidden But, we can alter other properties.
同样适用于隐藏,但是,我们可以更改其他属性。 For example,
例如,
#search {
border : 1px green solid;
}
#search:hover {
border : 5px red solid;
}
<div id="search">
abcdefgh
abcdefgh
abcdefgh
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.