首先，我们需要一个按钮来控制表单的显示和隐藏。我们可以使用HTML的button标签来创建一个按钮：
<button>显示表单</button>
接着，我们需要一个包含表单的div标签，初始时，设置它的display属性为none，表示它是隐藏的：
<div id="form" style="display:none; "> <form> ... </form> </div>
接着，我们需要使用CSS来控制按钮和表单的显示和隐藏。我们可以使用:hover伪类选择器来控制鼠标悬停在按钮上的效果：
button:hover {
background-color: #ddd;
cursor: pointer;
}
然后，我们可以使用CSS的display属性来控制表单的显示和隐藏：
#form {
display: none;
}
button:hover + #form,
#form:hover {
display: block;
}
这里，我们使用了CSS的+选择器和:hover伪类选择器来控制表单的显示和隐藏。当鼠标悬停在按钮上时，+选择器会选择紧跟在按钮后面的div标签，也就是表单所在的标签。而#form:hover则是在鼠标悬浮在表单上时隐藏表单。
最后，我们需要在页面中引入这些CSS样式：
<head> <style> /* 上面的CSS代码 */ </style> </head>
这样，当点击按钮时，表单就会显示出来。当鼠标离开表单时，表单就会自动隐藏。这样的效果既美观又实用，为用户带来不错的用户体验。
