在HTML中使用JS实现鼠标移动至DIV时使用浮窗显示预览内容,鼠标移走后恢复正常,且用于IE6.0以上的浏览器
时间: 2024-02-09 11:12:58 浏览: 23
可以通过以下代码实现:
```html
<div onmousemove="showPreview(event, this)" onmouseout="hidePreview()">
<!-- 需要显示预览内容的DIV -->
<p>预览内容</p>
</div>
<div id="preview" style="display:none; position:absolute;">
<!-- 预览浮窗 -->
<p>预览内容</p>
</div>
<script>
var previewElement = document.getElementById("preview");
function showPreview(event, element) {
// 获取需要预览的内容
var previewContent = element.innerHTML;
// 设置预览浮窗内容
previewElement.innerHTML = previewContent;
// 设置预览浮窗位置
previewElement.style.left = event.clientX + "px";
previewElement.style.top = event.clientY + "px";
// 显示预览浮窗
previewElement.style.display = "block";
}
function hidePreview() {
// 隐藏预览浮窗
previewElement.style.display = "none";
}
</script>
```
与前面的代码相比,主要变化在于需要使用`event`对象获取鼠标移动的位置,并设置预览浮窗的位置。此外,为了兼容IE6.0以上的浏览器,需要将预览浮窗的`position`属性设置为`absolute`。