Question

（我之前发过一个类似的问题，但现在更有针对性了..）

我正在尝试使用jQuery创建一个特殊的悬停效果。我有一个提交按钮 - 当用户将鼠标移到它上面时，我希望在按钮下方打开textarea元素。然后，用户可以将鼠标移动到textarea并输入内容......当他完成后，他可以将鼠标移回提交按钮并提交表单。如果用户将鼠标移到button + textarea之外，则textarea应该会消失。

当用户将鼠标放在菜单项上时，效果与导航菜单基本相同，相关项目列表在项目下方打开，然后用户可以从中选择。如果他离开该区域，相关项目列表将关闭。

您可以在jsbin找到我没有成功的测试（每当用户尝试访问时，textarea都会消失）

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

您需要在容器上设置一个高度，此时它不足以包含该框。

一旦你完成了这个，你似乎仍然有把它保留在那里的问题，你可能想要添加一些东西以确保焦点它仍然存在。

使用按钮和textarea悬停效果

1 个答案: