0

テキストの特定の領域にカーソルを合わせると、「追加情報」スタイルのiframeを追加しようとしています。私の基本的なセットアップでいくつかのjavascriptとcssと2つの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を表示させることですが、その周りの要素を台無しにしないでください。現在、アンカーにカーソルを合わせると、すべてのloremipsumがiframeを含むdivの長さだけ下に移動します。誰かが私の意味を正確に知りたい場合は、私のWebサイトで実用的な例を提供できます。

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 に答える