使用textarea的onHover效果

我正在尝试创建hover效果，因此当用户将鼠标移到按钮上时，将在按钮下方显示文本区域，用户可以在提交表单之前插入文本。 如果用户在打开后离开textarea，我希望它再次关闭….我在下面使用的代码的问题是，一旦用户离开按钮区域（为了插入文本） textarea）textarea消失了。 帮助将不胜感激！

我使用了以下代码（您也可以在jsbin上找到以下示例）：

CSS

#send-container { position:relative; } #text-container { display:none; background-color:#FEF9F4; position: absolute; z-index: 1000; top:28px; left:0; padding:2px; } textarea { width: 150px; height: 50px; resize: none; border: 3px solid #cccccc; padding: 5px; font-family: Tahoma, sans-serif; } 

HTML

JS（jQuery）

 $("#send-container").live("mouseenter", function() { $("#text-container" , $(this)).show(); }); $("#send-container").live("mouseleave", function() { $("#text-container" , $(this)).hide(); } ); 

谢谢！

乔尔

Answer 1

例如，您可以增加#send-container的高度。

  $("#send-container").live("mouseenter", function() { $(this).css('height', 200); // or whatever it will work with your design $("#text-container" , $(this)).show(); }); $("#send-container").live("mouseleave", function() { $(this).css('height', 100); // revert to original height $("#text-container" , $(this)).hide(); } ); 

这会增加你的听众的区域，也会听:)

Answer 2

首先，考虑这是否是您尝试实现的最佳方法。 似乎这将提供可怕的用户体验。 首先，“按钮”是否也提交表格？ 如果是这样，textarea会在点击时消失，因为用户会离开它。

以下是您要求的示例，但无法提交表单： http ： //jsbin.com/otuvu4/edit