页面一直展示着一个文本框当鼠标移动到上方,标签相对于页面悬浮
时间: 2024-01-31 12:04:54 浏览: 35
您可以使用 CSS 和 JavaScript 来实现文本框的悬浮和标签的悬浮。以下是一种实现方法:
HTML 代码:
```html
<div class="container">
<input type="text" placeholder="请输入内容" class="hoverable">
<div class="popover">
<p>这是标签的详细内容</p>
</div>
</div>
```
CSS 代码:
```css
.container {
position: relative;
height: 50px;
}
.hoverable {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
border: none;
box-sizing: border-box;
font-size: 16px;
}
.popover {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 200px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
.container:hover .popover {
display: block;
}
```
JavaScript 代码:
```javascript
const input = document.querySelector(".hoverable");
const popover = document.querySelector(".popover");
function positionPopover() {
const rect = input.getBoundingClientRect();
popover.style.top = rect.bottom + "px";
popover.style.left = rect.left + "px";
}
input.addEventListener("mousemove", () => {
positionPopover();
});
window.addEventListener("resize", () => {
positionPopover();
});
```
在 HTML 中,我们使用了一个 div 元素作为容器,其中包含了一个 input 元素作为文本框,以及另一个 div 元素作为标签的详细内容。在 CSS 中,我们将容器设置为相对定位,文本框设置为绝对定位,并将其宽度和高度设置为 100% 以充满容器。标签的详细内容的 div 元素设置为绝对定位,并设置其 top 和 left 属性使其出现在文本框的下方。初始状态下,详细内容的 div 元素是隐藏的,当容器被鼠标悬浮时,我们使用:hover 选择器将详细内容的 div 元素显示出来。
在 JavaScript 中,我们使用了 getBoundingClientRect 方法获取文本框的位置信息,并根据位置信息计算出详细内容的 div 元素的位置。我们在 mousemove 事件和 resize 事件中都调用 positionPopover 函数来更新详细内容的 div 元素的位置。这样就实现了文本框和标签的悬浮效果。