Question

我正在尝试创建悬停效果，因此当用户将鼠标移到按钮上时，将在按钮下方显示textarea，用户可以在提交表单之前插入文本。如果用户在打开后离开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

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

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

使用textarea进行onHover效果

2 个答案: