顯示懸停在文本上的iframe

當您將鼠標懸停在特定區域的文本上時，我試圖添加「附加信息」樣式的iframe。在我的基本設置中有一些javascript和css和兩個div的幫助。顯示懸停在文本上的iframe

<a 
    onmouseover="ShowContent('uniquename3'); return true;" 
    onmouseout="HideContent('uniquename3'); return true;" 
    href="javascript:ShowContent('uniquename3')"> 
Tournament 22:00-23:00 
</a> 
<div 
    id="uniquename3" 
    style="display:none; position:relative; left:0px; top:10px; border-style: none; background-color: gray; padding: 5px;overflow:none;width:212px;z-index:5;"> 
<iframe src="Test2.html" width="212px" height="340px" border="0" scrollbar="no" frameborder="0"></iframe> 
</div> 
<div id="other" style="z-index:1;"> 
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  laudantium,  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae  dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam  est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius  modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima  veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea  commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil  molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 
</div>

我遇到的問題是我的javascript將iframe中的新div與我的鼠標放在一起，然後碰到我的所有文本。真的，我需要做的是讓iframe顯示出來，但不要弄亂它周圍的元素。目前，當您將鼠標懸停在錨點上時，它會將所有Lorem ipsum與iframe中的div長度相比較。我可以在我的網站上提供一個有效的例子，如果有人想看到我的意思。

來源

2012-12-08 willthiswork89

我的方法是使用CSS屬性'position：fixed;'並將iframe的x和y座標設置爲文本底層區域的座標。 –

@NullPointer鏈接顯然無效 – willthiswork89

試試這個：

#uniquename3{ 
    display:none; 
    position:relative; 
    left:0px; 
    top:10px; 
    border-style: none; 
    background-color: gray; 
    padding: 5px; 
    overflow:none; 
    width:212px; 
    z-index:5; 
} 
#uniquename3 iframe{ 
    display:none; 
    position:absolute; 
    left:0px; /* pos as needed */ 
    top:0px; 
}

來源

2012-12-08 05:16:15 DACrosby

的解決方案是，以確保股利待徘徊放置在頁面的底部（因此它通常不與格式混亂），然後設置divs相對於絕對的位置。這可以讓javascript將其設置爲正確的xindex，並顯示在頂部。

來源

2012-12-08 05:19:50 willthiswork89

顯示懸停在文本上的iframe

回答

相關問題