html鼠标进入时隐藏当前页面,显示另一个页面,页面过度要平滑,鼠标离开时将当前页面重新显示
时间: 2024-01-05 13:03:04 浏览: 22
这可以通过CSS的动画和JavaScript来实现。首先,需要准备两个页面HTML和CSS代码,其中一个页面隐藏,另一个页面显示。然后,使用JavaScript来监听鼠标进入和离开事件,当鼠标进入时,使用CSS动画将当前页面隐藏,并显示另一个页面,当鼠标离开时,再次使用CSS动画将另一个页面隐藏,并显示当前页面。以下是一个示例代码:
HTML代码:
```
<div id="page1">
<!-- 第一个页面内容 -->
</div>
<div id="page2">
<!-- 第二个页面内容 -->
</div>
```
CSS代码:
```
#page1, #page2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s ease-in-out;
}
#page1 {
opacity: 1;
}
#page2 {
opacity: 0;
}
```
JavaScript代码:
```
var page1 = document.getElementById("page1");
var page2 = document.getElementById("page2");
page1.addEventListener("mouseenter", function() {
page1.style.opacity = 0;
page2.style.opacity = 1;
});
page2.addEventListener("mouseleave", function() {
page2.style.opacity = 0;
page1.style.opacity = 1;
});
```
在这个示例中,当鼠标进入第一个页面时,使用CSS动画将第一个页面隐藏(opacity: 0),并显示第二个页面(opacity: 1)。当鼠标离开第二个页面时,再次使用CSS动画将第二个页面隐藏(opacity: 0),并显示第一个页面(opacity: 1)。