Я не могу понять, как сделать мой 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-переходы в этом событии.