html鼠标悬停跳出栏目
时间: 2023-12-19 19:31:35 浏览: 33
以下是一个简单的HTML鼠标悬停跳出栏目的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML鼠标悬停跳出栏目</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: #f2f2f2;
overflow: hidden;
}
.text {
position: absolute;
top: 100%;
left: 0;
background-color: #555;
color: #fff;
padding: 10px;
opacity: 0;
transition: all 0.3s ease-in-out;
transform: translateY(-100%);
width: 100%;
box-sizing: border-box;
}
.container:hover .text {
opacity: 1;
transform: translateY(0%);
}
</style>
</head>
<body>
<div class="container">
<h2>鼠标悬停跳出栏目</h2>
<p>将鼠标悬停在此处以查看效果。</p>
<div class="text">
<p>这是一个跳出的栏目。</p>
<p>您可以在此处添加更多内容。</p>
</div>
</div>
</body>
</html>
```