在悬停时显示/隐藏div，然后悬停 [英] show/hide a div on hover and hover out

问题描述

我想在悬停期间显示和隐藏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，然后悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！