javascript - 将鼠标悬停在文本上时显示 iframe

Question

当您将鼠标悬停在特定文本区域上时，我正在尝试添加“附加信息”样式的 iframe。在我的基本设置中借助一些 javascript 和 css 以及两个 div。

<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 将新的 div 定位在我的鼠标所在的 iframe 中，然后将我的所有文本颠簸。我真正需要做的是让 iframe 显示出来，但不要弄乱它周围的元素。目前，当您将鼠标悬停在 anchor 上时，它会将所有 lorem ipsum 向下撞到带有 iframe 的 div 的长度。如果有人想明白我的意思，我可以在我的网站上提供一个工作示例。

Answer 1

试试这个:

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