在hover时显示/隐藏div并将其hover

我想在hover期间显示并隐藏div并将其hover。

这是我最近所做的。

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; } 

我的问题是，当我将鼠标hover在菜单ID上时，弹出div会闪烁。 这是为什么？

Answer 1

可能不需要JS。 你也可以用css来实现这个目的。 像这样写：

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

Answer 2

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

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

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做到这一点

Answer 4

我发现使用css opacity更适合简单的显示/隐藏hover，你可以添加css3过渡来做一个漂亮的完成hover效果。 旧的IE浏览器只会删除转换，因此它会优雅地降级为。

JS小提琴演示

CSS

 #stuff { opacity: 0.0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } #hover { width:80px; height:20px; background-color:green; margin-bottom:15px; } #hover:hover + #stuff { opacity: 1.0; } 

HTML

 
Hover
 
stuff 

Answer 5

你的HTML应该是这样的

 
 Test Content  
 
 This is the content that appears when u hover on the it   

Answer 6

您可以使用jQuery显示div，并将其设置在鼠标所在的位置：

HTML：

        
 
Hover me!
 
Ill show you wonderful things
 
 
 shhhh 
    

款式：

 #trigger { border: 1px solid black; } #secret { display:none; top:0; position:absolute; background: grey; color:white; width: 50%; } 

JS：

 $("#trigger").hover(function(e){ $("#secret").show().css('top', e.pageY + "px").css('left', e.pageX + "px"); },function(e){ $("#secret").hide() }) 

你可以在这里找到干杯的例子！ http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview