如何在悬停时更改iframe的高度？

如何解决如何在悬停时更改iframe的高度？

我尝试仅将iframe悬停在蓝色部分上，或将iframe本身悬停在其上时才显示。高度应在悬停状态和未悬停状态之间进行修改。问题是它保留了iframe的高度值，但我没有成功更改它。我尝试了％和container，但是可能不正确。将鼠标悬停在红色部分时，不应扩展div。谢谢。

Screenshot

代码： https://codepen.io/gschurck/pen/VwamqKy

.iframe1 { height: 10px; opacity: 0; transition: opacity 0.5s ease-in-out,height s; }

解决方法

问题是height:10px中的.iframe1无法正常工作-如果从该元素中删除opacity:0，您会发现它仍然是700px，只是被隐藏了通过不透明度。

请改为使用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),white,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,68.8c-1.18418,77.4c-1.18418,86c-1.18418,94.6c-1.18418,103.2c-1.18418,111.8c-1.18418,-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>

如何在悬停时更改iframe的高度？

如何解决如何在悬停时更改iframe的高度？

解决方法

相关推荐