0

当您将鼠标悬停在特定文本区域上时，我正在尝试添加“附加信息”样式的 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。如果有人想确切了解我的意思，我可以在我的网站上提供一个工作示例。

4

2 回答 2

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;
}
于 2012-12-08T05:16:15.553 回答
0

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

于 2012-12-08T05:19:50.570 回答