27

多くのアイテムのリストを含むスクロールDIVがあります。

 ___________
|         |^|
| Item1   | |
|_________| |
|         | |
| Item2   | |
|_________| |
|         | |
| Item3   | |
|_________|v|

ユーザーがリストアイテムをロールオーバーすると、そのアイテムを説明するポップアップが表示されます。

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|____________________
| Item2 | Description for item 2 |
|________------------------------
|         | |
| Item3   | |
|_________|v|

ジレンマは、スクロールするdivにoverflow：autoが必要ですが、ポップアップがdivの外部に表示されることを望んでいることです。だから現在、私のポップアップは切り刻まれています：

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|
| Item2 | De|
|________---|
|         | |
| Item3   | |
|_________|v|

HTML

<div id="box">
  <ul>
    <li>
       <h2>Item 1</h2>
       <span>Description for item 1</span>
    </li>
    <li>
       <h2>Item 2</h2>
       <span>Description for item 2</span>
    </li>
    <!-- ... and many other items --->
  </ul>
</div>

CSS

#box {
   width: 10em;
   height: 20em;
   overflow: auto;
}

#box ul {
   line-height: 2em;
}

#box ul li {
   position: relative;
}

#box ul li span {
   display: none;
   position: absolute;
   right: -1em;
   top: 1em;
   height: 1em;
}

#box ul li:hover span {
   display: block;
}
4

2 に答える 2

3

ポップアップ要素でposition：fixedを試してみて、それが役立つかどうかを確認できます。

http://jsfiddle.net/SpEb2/

于 2012-08-21T22:03:28.637 に答える
0

これを回避するために何か他のことをすることをお勧めします。JavaScriptを使用している場合は、ポップアップボックス専用のモジュールを作成できます。したがって、現在のページにポップアップを表示する場合は、そのモジュールを含めるだけです。

そのモジュールのhtmlとJavaScriptを混合して、絶対位置の非表示のポップアップdivを作成できます。ツールチップを有効にしてページ上の要素の上にカーソルを移動するときはいつでも、JavaScript関数を呼び出して、カーソル（または要素）がある場所に非表示のポップアップを表示し、適切な情報とともにポップアップを表示します。

この実装により、ポップアップシステムを非常にモジュール化して適応性を高め、Webサイト全体で統一されたポップアップを作成でき、そのプロパティを非常に簡単に変更できます。

于 2012-08-21T22:12:16.683 に答える