只允许鼠标悬停在 iframe 上（不点击）答案

【问题标题】：Allow mouse hover only on an iframe (no clicking)只允许鼠标悬停在 iframe 上（不点击）
【发布时间】：2017-02-01 13:29:33
【问题描述】：

我希望锁定我目前拥有的 iframe。

我想要它，这样任何人都可以将鼠标悬停在它上面，然后指针会出现，但它只会禁用所有在其中单击的能力。我试过使用 pointer-events: none; css 选项，但这会禁用一切。

我似乎无法在网上找到任何可以使用 iframe 实现这一点的地方，有什么想法吗？

【问题讨论】：

功能是通过 JavaScript 而非 CSS 启用/禁用的。如果框架显示的是同一域或您控制的域上的页面，您可以使用 JS 来实现。如果没有，你不能。您可以做的最好的事情是在框架顶部覆盖一个透明的 DIV 以防止点击。
我无法访问 javascript - 但我认为这可能是我最终必须要做的。

标签： javascript html css iframe

【解决方案1】：

一个简单的解决方案可能是使用 div 作为 iframe 顶部的捕捉器，该 iframe 具有 CSS 属性 cursor: pointer;，这将模拟指针效果，并且您将阻止 iframe 内的所有交互。

#catcher {
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

<div id="catcher">
<iframe src="https://www.google.com" width="100%" height="100%">
</iframe>
<div>

【讨论】：

应该可能已经解释过了，但这会很好用，除了我希望它们能够悬停的原因之外，我希望它们能够悬停是因为 iframe 中的图形，它们有点互动（你可以拖动它们，单击它们，调整它们的大小等），但我不想要任何这些。我只想能够将鼠标悬停在不同的数据点上，但如果可能的话不能点击。

【解决方案2】：

我认为这可能对你有帮助：

<div title="Your title Here" style="pointer-events: none !important;  cursor: pointer;">
    <iframe id="clock1" src="http://google.com" frameborder="0" width="110" height="110" 
            style="pointer-events: none !important;  cursor: pointer;"></iframe>
</div>

【讨论】：