时间戳

首页 > 解决方案 > 如何更改悬停时的 iframe 高度？

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

问题描述

我尝试让 iframe 仅在我悬停蓝色部分时出现，或者 iframe 本身出现时出现。高度应在悬停和非悬停状态之间进行修改。问题是它保留了 iframe 高度值，而我没有成功更改它。我尝试使用 % 和容器，但可能不正确。当我悬停红色部分时，不应扩展 div。谢谢。

截屏

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

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

标签： htmlcssiframehover

解决方案

问题是height:10px在你.iframe1的不工作 - 如果你opacity:0从那个元素中删除你会看到它仍然是 700px，它只是被不透明度隐藏了。

而是用于max-height控制 iframe div 上不断变化的高度。另外仅供参考，当高度设置为时，您不能在高度上使用 CSS 过渡auto，它们不起作用。相反，您可以设置一个 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>

推荐阅读