在 iframe 链接中触发 css a:hover答案

【问题标题】：Trigger css a:hover inside iframe links在 iframe 链接中触发 css a:hover
【发布时间】：2020-12-15 05:49:51
【问题描述】：

所以我有一个覆盖页面的 iframe，当您将鼠标悬停在 <a> 元素上时，我想通过在整个页面上从左到右过渡来基本上使 div 覆盖整个页面。到目前为止，我的代码是这样的，它似乎并没有真正做到我希望它在 <a> 甚至不在 iframe 内的元素上完全做的事情

这是我目前得到的代码，我尝试通过 css 来完成，当我在网上尝试时，这种方式可以工作，但 jsfiddle 上的示例并不能很好地工作。

 <a id="example">a link</a>
<iframe src="https://www.w3schools.com/cssref/sel_hover.asp" style="border: 0; width: 100%; height: 100%" id="iframe">Your browser doesn't support iFrames.</iframe>
<div class="post-s">
    <a href="#">wolooooloooo</a>>
</div>



.post-s {
    width: 0;
      height: 100%;
      background-color: rgba(253,0,0,0.7);
      position: absolute;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      transition: 0.7s ease;
  }
a:hover ~ .post-s{
        width: 100%;
    }

一个例子： https://jsfiddle.net/ejoaxmsw/7/

【问题讨论】：

当您发布没有代码的 jsfiddle 链接时，SO 会给您一个错误是有原因的。尽量不要通过将链接添加到代码块中来解决这个问题
为什么需要使用 iframe???

标签： javascript html css iframe

【解决方案1】：

您的链接位于 div.post-s 下，因此在 div 扩展时会丢失 a:hover。您可以在 div 上方设置链接

#example {
position: relative;
z-index: 1;
}

或禁用 div 的指针事件

.post-s {
pointer-events: none;
}

【讨论】：