在悬停

发布于 2025-01-31 20:13:43 字数 643 浏览 4 评论 0 原文

如何有效地渲染iframe durig悬停如图所示在这里

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

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

我正在与React合作，并进行风风，并会欣赏该方向的答案。

原文

How to efficiently render iframe durig hover as shown here

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

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

I am working with react, and tailwind for styling and would appreciate answers in that direction.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等待我真够勒 2025-02-07 20:13:43

如果要避免使用包装器，则可以直接在IFRAME上使用 obacity 。您已经有一个预留空间可以使用，并且不必使用包装纸。这取决于您的用例，您的解决方案是有效的选择。

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

iframe:hover {
  opacity: 1;
}

If you want to avoid using a wrapper for it, you could use opacity directly on the iframe. You would already have a reserved space for it and you wouldn't have to use a wrapper. It depends a bit on your use case, your solution is a valid alternative.

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

iframe:hover {
  opacity: 1;
}

回复收藏 0 原文

滿滿的愛 2025-02-07 20:13:43

最终这样做

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

Ended Up doing it this way

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

回复收藏 0 原文

~没有更多了~