我无法弄清楚如何点击我的iFrame下拉菜单

So I managed to get my iFrame to drop-down on hover, but it closes when the cursor moves out of the frame, or moves outside of the hyperlink in IE 9. I'd like to keep it open until I click somewhere else on the page. So unless there's a way to keep it from closing on hover, I'd like to change it to a onclick event. Here's the code:

所以我设法让我的iFrame在悬停时下拉，但是当光标移出框架时它关闭，或者移动到IE 9中的超链接之外。我想保持它打开直到我点击其他地方这一页。所以，除非有办法让它在悬停时关闭，否则我想把它改成onclick事件。这是代码：

HTML:

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:

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;
}

Is there a property I'm missing in the CSS? Or is there a way to do this with Javascript that I can't seem to find anywhere?

CSS中缺少一个属性吗？或者有没有办法用Javascript做到这一点，我似乎无法找到任何地方？

1 个解决方案

#1

Because the style is applied on :hover, and the element loses that pseudo-selector on the mouseout event, the behaviour you describe is expected.

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

You can't use a pseudo-selector for click events. You'll have to use JavaScript to add a class on click and remove it on another event.

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

In jQuery it would look something like:

在jQuery中它看起来像：

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

You'll also have to change your CSS :hover selector to be .expanded. It will observe the same CSS3 transitions on this event.

您还必须更改CSS：悬停选择器为.expanded。它会在此事件中观察到相同的CSS3过渡。

#1