Javascript 如何在鼠标悬停或单击时向上打开窗体？

我试图创建一个右下角的按钮，在点击或悬停后，它将打开一个表单。在点击登录后，表单将缓慢地打开和关闭，我的代码使按钮在表单打开时向下移动

按钮也应该在右边，我试过浮动：对；右：0；将按钮固定到右侧，但它不工作

这是我的密码：

功能展示{ document.getElementById'loginForm'.style.display=block； } 函数隐藏形式{ document.getElementById'loginForm'.style.display=none； } *{ 保证金：0； 填充：0； 框大小：边框框 } .no show{display:none；} .表格容器{ 位置：绝对位置； 底部：0； 右：0； 浮动：对； 宽度：100%； } 正文{字体系列：tahoma；} 登录表单{ 显示：无； 背景：ccc； 宽度：250px； 高度：100px； 填充：20px； 颜色：333； } .标签{ 光标：指针； 显示：块； 填充：5px15px； 字体大小：16px； 字体大小：粗体； } .表格标签{ 宽度：70px； 字体大小：12px； 字体大小：粗体； } .表单字段{ 宽度：180px； } .形式要素{ 字体大小：0px； 利润率：10px0； 显示：块； } .form标签，.form字段{ 显示：内联块； } .表单字段输入{ 填充物：3px 5px； } .提交btn输入{ 左边距：70像素； }

登录 姓名： 密码：

---

检查此代码。不需要jQuery，您可以通过纯css转换结合height属性来实现这一点

功能展示{ document.getElementById'loginForm'。classList.add'show'； } 函数隐藏形式{ document.getElementById'loginForm'。classList.remove'show'； } *{ 保证金：0； 填充：0； 框大小：边框框 } 身体{ 字体系列：tahoma； 高度：100vh； } 1.没有演出{ 显示：无； } .表格容器{ 位置：绝对位置； 底部：40px； 右：80px； 左：自动； 顶部：自动； 宽度：230px； } 登录表单{ 背景：ccc； 宽度：250px； 颜色：333； 身高：0； 溢出：隐藏； 过渡：均为0.5s； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 证明内容：中心； } loginForm.show{ 高度：150像素； } .标签{ 光标：指针； 显示：块； 填充：5px15px； 字体大小：16px； 字体大小：粗体； } .表格标签{ 宽度：70px； 字体大小：12px； 字体大小：粗体； } .表单字段{ 宽度：180px； } .形式要素{ 字体大小：0px； 边缘底部：10px； 显示器：flex； 弯曲方向：立柱； } .form标签，.form字段{ 显示：内联块； 宽度：100%； } .表单字段输入{ 填充物：3px 5px； } .提交btn输入{ 左边距：70像素； } 登录{ 文本对齐：居中； 光标：指针； } 姓名： 密码： 登录

---

@卡尔文修女感谢您的编辑！js应该永远是第一个吗？拜托，我无法理解确切的期望行为。单击后OpenForm按钮是否应消失？表单是否应显示在按钮下方？整个表单应该在蓝色区域内吗？你是说，为了一个片段？不，它是由SO预先定义的，使用工具栏中的按钮进行初始化时，您将看到有一些方块放置代码的每个部分。表单应在按钮打开表单上方打开。是的，单击后它应该消失。表单不必在蓝色区域内。通过绝对定位表单，您将向下推它，而不是向上滑动它。任何想要尝试的人都可以选择使用jquery animate来更改底部值，而不是使用幻灯片。很好，按钮现在隐藏了。唯一的问题是表单是向下打开的，我希望它向上打开，这样打开表单按钮就不会移动它的位置。你能指出代码有什么问题吗？请让我发疯！已更新，请检查这是否工作正常！有没有办法使登录按钮也成为表单的提交按钮，或者我应该使用其他按钮？您可以在表单中放置

#login{
float:right 
}

<div class="form-container">
  <form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm()">

  <span id="loginForm">        
      <span class="form-elements">
        <span class="form-label">Name:</span>
        <span class="form-field"><input type="name"></span>
      </span>
      <span class="form-elements">
        <span class="form-label">Password:</span>
        <span class="form-field"><input type="password"></span>
      </span>
  </span>
   <span class="label">Login</span></p>
 </form>
</div>