在悬停时显示/隐藏div，然后悬停

本文介绍了在悬停时显示/隐藏div，然后悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在悬停期间显示和隐藏div，然后将其悬停。

这是我最近做的。

css

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

}

  .hidden {
 visibility：hidden; 
   
 
 
 } 
 
 
  html 
 < div id =menuclass =margint10 round-border> 
< a href =＃>< img src =images / menu.jpgalt =id =menu_link/>< / a> 
< / div> 
< div class =flyout hidden>& nbsp;< / div> 
  
 javascript / jquery 
  $（＃menu）。hover（function（）{
 $（'flyout'）。removeClass（'hidden'）; 
}，function b $ b $（'。flyout'）。addClass（'hidden'）; 
}）; 
  
我的问题是，当我在菜单id上悬停时，弹出div正在闪烁。 
为什么？
解决方案
可能没有必要使用JS。你可以通过css来实现这一点。这样写：
  .flyout {
 position：absolute; 
 width：1000px; 
 height：450px; 
 background：red; 
 overflow：hidden; 
 z-index：10000; 
 display：none; 
} 
 #menu：hover + .flyout {
 display：block; 
} 
  
 
I would like to show and hide a div during hover and hover out.
here's what I've done lately.
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">&nbsp;</div>
javascript/jquery
$("#menu").hover(function(){
    $('.flyout').removeClass('hidden');
},function(){
    $('.flyout').addClass('hidden');
});
My problem is that when I hover on the menu id, the flyout div is blinking.why is that?
 解决方案 
May be there no need for JS. You can achieve this with css also. Write like this:
.flyout{
position:absolute;
width:1000px;
height:450px;
background:red;
overflow: hidden;
z-index:10000;
display:none;
}
#menu:hover + .flyout{
 display:block;
}
                        
这篇关于在悬停时显示/隐藏div，然后悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！