javascript - 我不知道如何让我的 iFrame 在点击时下拉

Question

所以我设法让我的 iFrame 在悬停时下拉，但当光标移出框架或在 IE 9 中移出超链接时它会关闭。我想保持打开状态直到我单击页面上的其他地方。因此，除非有办法防止它在悬停时关闭，否则我想将其更改为 onclick 事件。这是代码:

HTML:

<li><a href="#" id="uploadFiles">Upload files</a>
    <div id="stf" sty><!-- SendThisFile FileBox v3.02 (www.24-7transcripts.com) -->
    <table cellspacing=0 cellpadding=3 style="font-family: verdana, arial; font-size: 10px;">
    <tr><td align="center"><iframe id="stfLink" src="https://www.sendthisfile.com/filebox/index.jsp?widgetcode="ijljoo890jfljou98" marginwidth=0 marginheight=0 width="350" height="400" scrolling="no" frameborder=0></iframe></td></tr>
    <tr><td align="center"></td></tr>
    </table>
        <!-- SendThisFile FileBox v3.02 --></div>
    </li>

CSS:

.headerNav li #uploadFiles {
    color: #CCC;
    padding-top: 10px;
    font-size: 14px;
    float: right;
    padding-right: 20px;
    text-align: right;
}
.headerNav li {
-webkit-transition: all 0.5s ease-out;
}
.headerNav li #stf {
margin-right: -10px;
display: none;
height: 0px;
-webkit-transition: all 0.5s ease-out;
}
.headerNav li:hover #stf  {
margin-right: -80px;
display: block;
float: right;
margin-top: 25px;
border-radius: 10px;
}

CSS 中是否缺少某个属性？或者是否有一种方法可以使用我似乎无法在任何地方找到的 Javascript 执行此操作？

Answer 1

因为样式应用于 :hover，并且元素在 mouseout 事件中失去了伪选择器，所以您描述的行为是预期的。

您不能将伪选择器用于点击事件。您必须使用 JavaScript 在单击时添加一个类，并在另一个事件中将其删除。

在 jQuery 中它看起来像这样:

$('#myNavItem').click(function() {
    $('#myIFrame').addClass('.expanded');
});

您还必须将 CSS :hover 选择器更改为 .expanded。它将在此事件中观察到相同的 CSS3 转换。