javascript - Problème JS et CSS, après avoir déplacé la souris sur une icône de la carte, comment centrer le contenu affiché par rapport à l'icône.

Question

Comme le montre l'image ci-dessous, le côté droit est l'effet dont j'ai besoin, c'est-à-dire que lorsque la souris est déplacée sur l'icône de localisation rouge sur la carte, les photos et le contenu affichés sont centrés par rapport à l'icône de localisation ci-dessous. Le côté gauche est l'effet que j'ai fait. Le déplacement est trop grave, aidez-moi à y jeter un œil. Ci-dessous mon code HTML {code...}

仅有的幸福 · Answer

Le code que vous avez posté n'a aucun sens. Il montre uniquement la position de l'icône rouge et ne donne pas la structure et le style de la boîte pop-up. Il semble que la partie pop-up soit générée et ajustée dynamiquement par js. Deux idées :

1. Ajoutez le calque flottant à la balise icône `span` et définissez le style du calque flottant

.

Lorsque la souris passe sur l'icône, le contenu des données de la couche flottante est généré dynamiquement et ajouté à la balise span. Déplace les calques ajoutés dynamiquement lorsque la souris est déplacée. Vous devez définir le style du calque flottant, à peu près comme suit :

span.BMap_Marker > .浮动层 {
    background-color: #fff;
    /* 基础样式略 */
    bottom: 100%;
    left: 50%;
    margin-left: -48px; /* 假设你的浮动层总宽度为 96px， */
    position: absolute;
}

Vous devez faire attention au changement de l'attribut z-index de span 的 z-index, car le calque flottant y est intégré, donc le calque flottant peut être obscurci.

2. Ajustement dynamique JS

Si votre calque flottant a une taille fixe, il vous suffit d'utiliser JS pour obtenir l'icône actuellement sélectionnée, lire sa position relative, puis calculer la position du calque flottant :

left: 图标的left - (浮动层宽度/2);
top: 图标的top - 浮动层高度;

1. Ajoutez le calque flottant à la balise icône span et définissez le style du calque flottant

2. Ajustement dynamique JS

1. Ajoutez le calque flottant à la balise icône `span` et définissez le style du calque flottant