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显示出来，但不要弄乱周围的元素。目前，当您将鼠标悬停在锚点上时，它会将所有lorem ipsum向下撞击div的长度，其中包含iframe。如果有人想看到我的意思，我可以在我的网站上提供一个工作示例。

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

Answer 2

解决方案是确保要悬停的div放在页面的底部（因此通常不会弄乱格式化）然后将divs位置设置为相对于绝对值。这允许javascript设置它并使用正确的xindex，显示在顶部。

显示iframe悬停在文本上

2 个答案: