我想在悬停和悬停时显示和隐藏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;
}