我想在悬停和悬停时显示和隐藏div。
这是我最近做的。
CSS
- .flyout{
- position:absolute;
- width:1000px;
- height:450px;
- background:red;
- overflow: hidden;
- z-index:10000;
}
- .hidden{
- visibility: hidden;
}
HTML
- <div id="menu" class="margint10 round-border">
- <a href="#"><img src="images/menu.jpg" alt="" id="menu_link"/></a>
- </div>
- <div class="flyout hidden"> </div>
使用Javascript / jQuery的
- $("#menu").hover(function(){
- $('.flyout').removeClass('hidden');
- },function(){
- $('.flyout').addClass('hidden');
- });
我的问题是，当我将鼠标悬停在菜单ID上时，弹出窗口会闪烁。
这是为什么？
解决方法
可能没有必要JS。你也可以用css来实现。这样写：
- .flyout{
- position:absolute;
- width:1000px;
- height:450px;
- background:red;
- overflow: hidden;
- z-index:10000;
- display:none;
- }
- #menu:hover + .flyout{
- display:block;
- }
