在悬停时呈现Iframe

Question

如何在鼠标悬停时有效渲染iframe

到目前为止，我有这个作为例子

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一起工作，并且在样式方面顺风顺水，我希望得到这个方向的答案。

谢谢!

Answer 1

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

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; }
}