我不知道如何在点击时使iFrame下拉菜单

Question

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:

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

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?

Answer 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.

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.

In jQuery it would look something like:

$('#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.