当mouseout时隐藏div

我有两个div，一个用于简短摘要，一个用于长摘要。
当我在简短摘要中“鼠标hover”时，简短摘要消失并显示长摘要。
当我从长摘要中“鼠标移出”它应该消失并且应该出现简短摘要。

问题是，当我仍然在长摘要的边界内但是在排序摘要的位置之外时，会发生mouseout事件

码：

   function show(Fdiv) { $(Fdiv).css("display", "none"); $(Fdiv).next().css("display", "inline"); } function hide(Sdiv) { $(Sdiv).css("display", "none"); $(Sdiv).prev().css("display", "inline"); }    
 Sort summary 
 Second Row
 
 Long Summary 
 Second Row
 Third Row 
 Fourth Row
   

Answer 1

试试这个

 
 Sort summary 
 Second Row
 
 Long Summary 
 Second Row
 Third Row 
 Fourth Row
 ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 2

您可以使用CSS实现此目的，而不是使用JavaScript进行攻击。 这保持了性能以及语义和逻辑优势。

您必须稍微更改HTML结构。 我会假设摘要是针对书籍的。

HTML

 
 
Short summary.
 
Long summary.
  

CSS

 .book .long, .book:hover .short { display:none } .book:hover .long { display:block } 

希望这可以帮助。

Answer 3

使用jquery本机函数mouseleave这很简单

Answer 4

试试这个工作演示 ： http ： //jsfiddle.net/UG3FZ/

此演示使用以下API：

.mouseout – http://api.jquery.com/mouseover/

.mouseover – http://api.jquery.com/mouseout/

由于您使用的是JQ最新版本，如果我建议您阅读api jquery和在线提示。

rest演示应该满足您的需求:)

码

 $(function() { $(".show_div").mouseover(function() { $(this).next().show(); $(this).hide("slow"); }); $(".hide_div").mouseout(function() { $(this).prev().show(); $(this).hide("slow"); }); });​ 

Answer 5

这样做： –

HTML：

 
 
 Short summary 
 Second Row
 
 Long Summary 
 Second Row
 Third Row 
 Fourth Row
  

JQuery的：

 $(".main") .mouseenter( function() { $(this+".long").show(); $(this+".short").hide(); }) .mouseleave( function() { $(this+".short").show(); $(this+".long").hide(); }); 

参考现场演示