0

モーダル ポップアップ コントロールを使用して Web ページを作成しました。このコントロール内で、データを表示するための html を動的に構築します。一部のテーブルタグ内には、次のものがあります。

<td>
<a href="#"><span>S</span><span class="pop">description</span></a>
</td>

タグの上にカーソルを置いたときにポップアップ効果を作成したい。私のCSSは次のとおりです。

a .pop {
    display:inline;
    position:absolute;
    visibility: hidden;
    background-color: #FFFFFF;
    border: solid 2px #000000;
    padding: 5px;
    margin: 0 0 0 10px;
    color: #000000;
    text-align: left;
    font-weight: normal;
}

a:hover .pop {
    visibility: visible;
}

これは、標準の HTML ページ内でコントロールを使用すると完全に機能します。テーブルデータがモーダルウィンドウよりも大きいときにモーダルコントロールを下にスクロールする必要があるまで、モーダルポップアップコントロール内で動作しているように見えます。

ホバー効果が機能していないように見えます。これは、「.pop」クラスに「position」:「absolute」を使用していて、ホバー効果が機能しているためだと思いますが、ページをスクロールしたため、その位置はタグに相対的ではなくなりました。

私はこれを回避することができず、それが私を殺しています。「マウスオーバー」イベントを使用してコントロールを動的に再配置する必要がありますか、それとも CSS を介してこれを実現できますか?何かが足りない/初心者です。

カール

4

1 に答える 1

2

これを追加してみてください：

a { display:block; position:relative }

これにより、span.pop が、それが含まれているタグに対して相対的に配置されます。

例: http://jsfiddle.net/R4Erw/

于 2013-05-02T12:35:52.217 に答える