触发css a:悬停在iframe链接内

Question

所以我有一个覆盖页面的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/

Answer 1

您的链接位于div.post-s下，因此在div展开时会丢失一个：hover。您可以在div 上设置链接

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

或禁用div 的指针事件

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