Question

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

<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>

Answer 1

你不需要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;
  }
}

使用jquery在textarea中创建输入表单弹出窗口？

1 个答案: