<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hidden-box {
display: none;
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>
</head>
<body>
<div class="hidden-box">现在你能看到我...</div>
<div class="visible-box">现在你看不到我了！</div>
<table>
<tr>
<td>我可见！</td>
<td class="collapsed">我被折叠了！</td>
<td>我也可见！</td>
</tr>
</table>
<div class="normal">我是一个正常的div</div>
<div class="normal">我是一个折叠的div</div>
<div class="normal">我是另一个正常的div</div>
<div class="magic-box">把鼠标放在我上面！</div>
</body>
</html>
index.html
index.html