悬停时呈现 Iframe

Question

如何有效地呈现 iframe durig hover 如图所示here

到目前为止我以这个为例

 HTML: <a class="iframe-link" href="https://saheed.codes/uses">Home Page<iframe src="https://saheed.codes/" loading="lazy" style={{width: "100%", height: "600px", border: "0px none"}}></iframe></a>

.

css: 
.iframe-link iframe {
  display: none;
}
.iframe-link:hover iframe {
  display: block;
}

我正在使用 React 和 tailwind 进行样式设计，希望得到这方面的答案。

谢谢！

Answer 1

如果您想避免使用包装器，可以直接在 iframe 上使用 opacity。您已经为它保留了 space 并且您不必使用包装器。这在一定程度上取决于您的用例，您的解决方案是一个有效的替代方案。

iframe {
  opacity: 0;
  transition: opacity 0.5s linear;
}

iframe:hover {
  opacity: 1;
}

Answer 2

最后就这样做了

.iframe-link iframe {
  display: none;
}
.iframe-link:hover iframe {
  -webkit-animation: slow 2s;
       -moz-animation: slow 2s; 
        -ms-animation: slow 2s; 
         -o-animation: slow 2s; 
            animation: slow 2s;
  display: block;
  /* opacity: 1; */

}

@keyframes slow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

悬停时呈现 Iframe

Render Iframe on hover

html

css

hover

reactjs