javascript - JS および CSS の問題、マップ上のアイコンにマウスを移動した後、表示されたコンテンツをアイコンを基準にして中央に配置する方法。

Question

以下に示すように、右側は必要な効果です。つまり、地図上の赤い場所アイコンの上にマウスを移動すると、表示される写真とコンテンツが下の場所アイコンを基準にして中央に配置されます。左側が私が作ったエフェクトですが、ズレがひどいので参考にしてください。

以下は私の HTML コードです

リーリー

Answer 1

投稿したコードは、赤いアイコンの位置を示すだけで、ポップアップ ボックスの構造やスタイルを示すものではありません。ポップアップ部分はjsで動的に生成・調整されているようです。 2 つのアイデア:

1. アイコンspanタグにフローティングレイヤーを追加し、フローティングレイヤーのスタイルを設定します

マウスがアイコン上に移動すると、フローティング レイヤー データ コンテンツが動的に生成され、span タグに追加されます。マウスを移動すると、動的に追加されたレイヤーが外に移動します。大まかに次のように、フローティング レイヤーのスタイルを設定する必要があります:

リーリー

フローティングレイヤーが埋め込まれているため、フローティングレイヤーが隠れてしまう可能性があるため、span 的 z-indexのz-index属性の変更に注意する必要があります。

2. JSの動的調整

フローティング レイヤーのサイズが固定されている場合は、JS を使用して現在選択されているアイコンを取得し、その相対位置を読み取り、フローティング レイヤーの位置を計算するだけです。

リーリー