在悬停时显示/隐藏div并将其悬停

Question

我想在悬停期间显示并隐藏div并将其悬停.

这是我最近所做的.

CSS

$("#menu").hover(function() {
  $('.flyout').removeClass('hidden');
}, function() {
  $('.flyout').addClass('hidden');
});

.flyout {
  position: absolute;
  width: 1000px;
  height: 450px;
  background: red;
  overflow: hidden;
  z-index: 10000;
}

.hidden {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="menu" class="margint10 round-border">
  <a href="#"><img src="images/menu.jpg" alt="" id="menu_link" /></a>
</div>
<div class="flyout hidden">&nbsp;</div>

我的问题是,当我将鼠标悬停在菜单ID上时,弹出div会闪烁.这是为什么？

Answer 1

为什么不直接使用.show()/.hide()呢？

$("#menu").hover(function(){
    $('.flyout').show();
},function(){
    $('.flyout').hide();
});

Answer 2

可能不需要JS.你也可以用css实现这个目标.像这样写:

.flyout {
    position: absolute;
    width: 1000px;
    height: 450px;
    background: red;
    overflow: hidden;
    z-index: 10000;
    display: none;
}
#menu:hover + .flyout {
    display: block;
}

Answer 3

这是执行此操作的不同方法.我发现你的代码工作正常.

您的代码:http://jsfiddle.net/NKC2j/

Jquery切换类演示:http://jsfiddle.net/NKC2j/2/

Jquery淡出切换:http://jsfiddle.net/NKC2j/3/

Jquery幻灯片切换:http://jsfiddle.net/NKC2j/4/

你可以用Sandeep回答的CSS做到这一点