Javascript 使用jquery在文本区域内弹出输入表单？

我创建了一个textarea表单（而不是创建一个ul列表），它将显示所有用户的消息，我还创建了一个输入表单，用户在其中键入消息。当用户的光标悬停在文本区域上时，我想让输入表单出现在文本区域上，如图所示

<form id="message-form" action="#" method="post">
  <input id="message" placeholder="Write your message here...>
            <button type="submit">Send Message</button>
  <button type="button" id="close">Close Connection</button>
</form>

对于这样的东西，您不需要jQuery；只需使用CSS：

input.focus-actions:focus + .submit {
  display: block;
}
.submit {
  display: none;
}

您的html可能如下所示：

<form action = "/">
    <fieldset>
        <legend>My Focus Form</legend>
        <input type = "text" class = "focus-actions" placeholder = "Write your message here..." required autofocus/>
        <footer class = "submit">
            <button type = submit>Send Message</button>
            <button>Close</button>
        </footer>
    </fieldset>
</form>

.submit {
  -webkit-animation: fadeIn 1s ease;
  -o-animation: fadeIn 1s ease;
  animation: fadeIn 1s ease;
}
@-moz-keyframes fadeIn {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    -ms-filter: none;
    filter: none;
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    -ms-filter: none;
    filter: none;
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    -ms-filter: none;
    filter: none;
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    -ms-filter: none;
    filter: none;
    opacity: 1;
  }
}