0

私は CSS ポップアップに苦労しており、誰かが助けてくれることを願っています。

セル内にこのポップアップを持つさまざまな tds があり、firefox、chrome など (通常) では正常に動作します。ただし、IE8 より前の古いブラウザでは問題が発生します。

マウスがセルの外に出ると、ポップアップ領域 (セルのすぐ下にある) の上を移動しても、:hover が失われるようです。あなたはおそらくそれがすべきことだと言っているでしょうが、firefox でホバーされている親の子要素は、親の :hover クラスを保持します。

ポップアップ div は絶対位置に配置され、-999px の左マージンが与えられます。（これで結構です）

親 div 要素の :hover で、margin-left は -125px に設定されます (ポップアップ div の幅の半分なので、中央に配置されます - これも問題ありません)。

これはすべて問題なく、前述のように最新のブラウザーで完全に機能します。

HTML スニペット

<tr>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
    <td>
        <div class="tooltip">
            <span class="events">CONTENT</span>
        </div>
    </td>
</tr>

これまでのCSS

#page-content .block_calendar_month { overflow: visible; }

.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; }

.tooltip span { margin-left: -999em; position: absolute; }
td.day:hover { background-color: #fbf16b; }

.tooltip:hover span { font-size: 12px; position: absolute; left: 0em; z-index: 5000; top: 1em; margin-left: -125px; width: 250px; }

.tooltip:hover span div { }
.events {padding: 0.8em 1em; }

これを解決しようとして数時間を失ったので、誰かが私にアドバイスをくれることを願っています.

4

1 に答える 1

1

私はしばらくIE6に触れていませんが、IE7での作業から、テーブルとz-indexでいくつかのファンキーなことをしていることがわかります。ツールチップを使用する場合の最善の解決策は、テーブルを使用しないことです。テーブルコードを取り除いて、次のことを行ってみませんか。

<div class="tooltip">
    <span class="events">CONTENT</span>
</div>

また、使用しているプラ​​グインがわかりません（実際、使用していないようです）が、JQuery Toolsツールチッププラグインを使用している場合は、ポップアップのオフセット距離をJSONパラメーターとして設定できます。詳細については、http：//jquerytools.org/demos/tooltip/dynamic.htmlをご覧ください。

現在の実装を維持する場合は、ツールチップのdisplay：blockとdisplay：noneを切り替えることをお勧めします。

于 2013-02-13T20:00:56.780 に答える