我不知道如何使我的iFrame下拉點擊

因此，我設法讓我的iFrame下拉懸停，但它關閉時，光標移出框架，或移動到超鏈接在IE 9.我想保持它打開，直到我點擊頁面上的其他地方。因此，除非有辦法阻止它在懸停時關閉，否則我想將其更改爲onclick事件。下面的代碼：我不知道如何使我的iFrame下拉點擊

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做到這一點，我似乎無法找到任何地方？

來源

2012-03-19 Nik

由於該樣式應用於:hover，並且該元素在mouseout事件中丟失了該僞選擇器，因此您所描述的行爲是預期的。

您不能對點擊事件使用僞選擇器。您必須使用JavaScript在點擊時添加課程，並在另一個活動中將其移除。

在jQuery中它看起來是這樣的：

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

您還可以改變你的CSS :hover選擇是.expanded。它會在這個事件中觀察到相同的CSS3轉換。

來源

2012-03-19 04:52:59 lukiffer

對不起，請原諒我的無知。我還是HTML，JavaScript等新手。我將在哪裏分配類屬性'expanded'？內部框架？那麼CSS規則會是什麼樣子？更改.headerNav li：將#stf懸停到.headerNav li #stf .expanded？ – Nik 2012-03-19 05:19:30

當然 - 在jquery腳本示例中，如果您單擊ID爲myNavItem的元素，它會將.expanded類添加到ID爲myIFrame的元素。在這種情況下，我可能只會附加到第一個錨的點擊事件。既然你實際上顯示的是div，你可以定位'$（'＃stf'）'，註釋中的樣式是正確的，除非#stf和.expanded之間沒有空格。 – lukiffer 2012-03-19 05:25:18

我似乎無法得到它的工作。我添加了：的頭。並刪除了CSS中的空間，沒有任何東西。我確定我錯過了一些超級基本的東西，但我不知道是什麼。 – Nik 2012-03-19 05:39:09

我不知道如何使我的iFrame下拉點擊

回答

相關問題