클릭시 내 iFrame 드롭 다운을 만드는 방법을 알아낼 수 없습니다

Question

iFrame을 가져 가면 마우스를 올려 놓을 수 있지만 커서가 프레임 밖으로 이동하거나 Internet Explorer 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 이벤트에서 해당 의사 선택기를 잃어 버리기 때문에 설명하는 동작이 필요합니다.

클릭 이벤트에 의사 선택기를 사용할 수 없습니다. 자바 스크립트를 사용하여 클릭시 클래스를 추가하고 다른 이벤트에서 클래스를 제거해야합니다. 또한 .expanded로 당신의 CSS를 :hover 선택을 변경해야합니다

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

:

jQuery를 그것은 같이 보일 것입니다. 이 이벤트에서 동일한 CSS3 전환을 관찰합니다.