jquery - iframe 在悬停时展开和缩小

Question

我有一个 iframe 内成员的下拉菜单。

iframe 的大小取决于变量，因此当用户将鼠标悬停在按钮上时需要高度为 100%，宽度为 100%，以便可以看到任何必要的信息。

iframe 需要从高度 50px，宽度：300px 到 100%,100%。

这样当菜单不在下拉菜单中时，其他父页面链接将起作用。

类似的东西

<iframe id="parent".....><ul><li class="drop_item">button1</li><li class="drop_item">button2</div></ul></iframe>

“父母”需要在悬停“drop_item”时展开。

希望这是有道理的。

score 2 · Accepted Answer

我不确定您是否明白<iframe>- iframe 旨在在您页面的“框”内显示来自另一个 url 的内容，它必须具有src链接到其他页面的属性。（正如@MrLister 所说 - 它的标记中的内容仅在浏览器不支持 iframe 时显示）您应该尝试使用<div>这样的代替：

<div id="parent".....><ul><li class="drop_item">button1</li><li class="drop_item">button2</div></ul></div>

然后应用此CSS代码（在这种情况下不需要jQuery）：

#parent{
    width:300px;
    height:50px;
}

#parent:hover{
    width:100%;
    hieght:100%;
}

**请注意，CSS如果您决定继续使用 iframe，这些规则也应该有效

score 0 · Accepted Answer

使用 iFrame-resizer 和一点额外的 JS 可以做到这一点。

2 回答 2