使用 CSS 定位单个 iframe

Posted 2023-03-16

【中文标题】使用 CSS 定位单个 iframe

【英文标题】：Targeting an individual iframe with CSS

【发布时间】：2016-08-17 22:59:19

【问题描述】：

在我的 tumblr 博客上：http://ukgraffiti.tumblr.com/ 我用过：

iframe opacity:0
iframe:hover opacity:1

隐藏 tumblr 控制按钮（关注、仪表板），以便它们仅在用户将鼠标悬停在它们上方时显示。

不幸的是，其他元素也会以同样的方式受到影响。例如，如果我在我的博客上发布一首歌曲，小播放器小部件会以同样的方式隐藏。此外，可以打开帖子以获取答案，这会导致帖子下方的小答案表格。这也受 ifra 不透明度设置的影响。

是否可以仅针对具有不透明度规则的 tumblr 按钮？

提前致谢。

【参考方案1】：

将一个类添加到您想要具有不透明度规则的所有 iframe，然后使用您的 CSS 定位该类。

例如。 html：

<iframe class="className"></iframe>

例如。 CSS：

iframe.className opacity:0
iframe.className:hover opacity:1

【讨论】：

感谢您的快速回答。我不擅长编码，所以你能澄清一下这门课的去向吗？我只想定位右上角的 tumblr 按钮，但我不确定我需要把那个类名放在哪里。它可以放在我的 html 中的任何位置，还是必须围绕按钮环绕 html？问题是，我不知道 html 的哪个部分控制按钮。

我不确定我能不能。我已经搜索了“iframe”的整个代码，它唯一找到的是我添加的不透明度的 CSS 代码。我认为这些东西是由 tumblr 控制的，但我想因为我能够用 CSS 定位它们，所以我可以单独定位它们。

我在网上搜索答案时发现了这个。不确定它是否是你需要的。 code

抱歉，除非您可以编辑页面的 HTML 和 CSS，否则您无法执行此操作。

我可以编辑页面的 HTML 和 CSS，但 iframe 的代码不是其中的一部分。也许这就是问题所在，但我想因为我可以用 CSS 隐藏 iframe 元素，所以我可以单独定位每个元素。也许不吧。无论如何，非常感谢您的帮助。

【参考方案2】：

以防万一其他 tumblr 用户感兴趣，答案是：

.tmblr-iframe:nth-of-type(1)  opacity:0; 
.tmblr-iframe:hover  opacity:1 !important; 

感谢所有试图帮助我的人。