Jquery 文本区域的悬停效果

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

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

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

<div id="send-container">
    <input type="button" value="Button">
    <div id="text-container">
      <textarea></textarea>
    </div>
  </div>

谢谢

---

Joel

例如，您可以增加“发送”容器的高度

 $("#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();
        }
   );

---

这会增加您的侦听器也将侦听的区域：）

例如，您可以增加#send容器的高度

 $("#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();
        }
   );

---

首先，考虑一下这是否是你想要达到的最好的方法。似乎这将提供一个可怕的用户体验。首先，“按钮”是否也提交表格？如果是这样，文本区域将在单击时消失，因为用户会离开它

以下是您要求的示例，但无法提交表格：

---

首先，考虑一下这是否是你想要达到的最好的方法。似乎这将提供一个可怕的用户体验。首先，“按钮”是否也提交表格？如果是这样，文本区域将在单击时消失，因为用户会离开它

以下是您要求的示例，但无法提交表格：