我尝试让 iframe 仅在我悬停蓝色部分时出现，或者 iframe 本身出现时出现。高度应在悬停和非悬停状态之间进行修改。问题是它保留了 iframe 高度值，而我没有成功更改它。我尝试使用 % 和容器，但可能不正确。当我悬停红色部分时，不应扩展 div。 谢谢。
代码： https://codepen.io/gschurck/pen/VwamqKy
.iframe1 { height: 10px; opacity: 0; transition: opacity 0.5s ease-in-out, height s; }
【问题讨论】：
问题是 .iframe1 中的 height:10px 不起作用 - 如果您从该元素中删除 opacity:0 ，您会看到它仍然是 700 像素，它只是被不透明度隐藏了。
改为使用max-height 来控制 iframe div 的高度变化。另外仅供参考，当高度设置为auto 时，您不能在高度上使用 CSS 过渡，它们不起作用。相反，您可以设置一个 max-height 来让 div 使用它需要的任何高度，但仍然有一个值可以让转换工作。
这些是您需要的更改：
.iframe1 {
height: 10px;
max-height: 10px; /* Add this to match the height value */
opacity: 0;
transition: opacity 0.5s ease-in-out, max-height 1s; /* change height to max-height */
}
.nymeria:hover .iframe1 {
height: 700px;
max-height: 700px; /* Add this to match the height value */
opacity: 1;
transition: 0s max-height, opacity 1s ease-in-out 0.2s;
}
工作片段：
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap");
body {
text-align: center;
color: white;
background-color: #181a1c;
font-family: Raleway;
}
h1 {
font-size: 70px;
}
hr {
width: 100%;
border: 0;
height: 1px;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
white,
rgba(0, 0, 0, 0)
);
}
.iframe1 {
height: 10px;
max-height:10px;
opacity: 0;
transition: opacity 0.5s, max-height 1s, height 1s;
}
.nymeria {
overflow: visible;
max-height: 200px;
transition: max-height 0.1s ease-in-out 0.5s;
background-color: blue;
}
.nymeria:hover {
max-height: 1000px;
}
.nymeria:hover .iframe1 {
height: 700px;
max-height:700px;
opacity: 1;
}<!DOCTYPE html>
<html lang="fr">
<head>
<title>G</title>
<link rel="stylesheet" type="text/css" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>G</h1>
<div class="reseaux">
<div>
<h2>Mes projets</h2>
<div class="nymeria">
<div>
<h3>Site web de l'association esport Nymeria</h2>
<div>
Aperçu
</div>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0 0 172 172" style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g fill="#ffffff">
<path d="M47.3,18.77891v119.52656l30.83906,-21.61758l19.9127,39.46426l19.60195,-10.12012l-20.60137,-38.12891l38.51524,-8.50762l-3.05703,-2.78828zM51.6,28.52109l74.94766,68.46406l-35.97891,7.93652l21.22285,39.29629l-11.85859,6.12246l-20.18984,-40.02695l-28.14316,19.72793zM60.2,51.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,77.4c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,86c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,94.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,103.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,111.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path>
</g>
</g>
</svg>
</div>
<iframe class="iframe1" title="Inline Frame Example" width="1500" height="700" src="https://gschurck.github.io/nymeria-website">
</iframe>
</div>
<hr>
</div>
</body>
</html>【讨论】：
.iframe1 类中遗漏了transition 的一部分 - 现在看看，它应该可以工作了。
transition: height 1s; 工作？