javascript - 지도의 아이콘으로 마우스를 이동한 후 표시된 콘텐츠를 아이콘을 기준으로 중앙에 배치하는 방법에 대한 JS 및 CSS 문제입니다.

Question

아래 그림과 같이 오른쪽에 있는 것이 제가 필요한 효과입니다. 즉, 지도의 빨간색 위치 아이콘 위로 마우스를 이동하면 표시되는 사진과 콘텐츠가 아래 위치 아이콘을 기준으로 중앙에 배치됩니다. 왼쪽은 제가 만든 효과입니다. 변위가 너무 심각합니다.

아래는 내 HTML 코드입니다

으아악

Answer 1

게시하신 코드는 빨간색 아이콘의 위치만을 표시하며 팝업 상자의 구조와 스타일을 제공하지 않습니다. 팝업 부분은 js에 의해 동적으로 생성되고 조정되는 것 같습니다. 두 가지 아이디어:

1. 아이콘 span 태그에 플로팅 레이어를 추가하고 플로팅 레이어 스타일을 설정합니다

마우스를 아이콘 위로 이동하면 플로팅 레이어 데이터 콘텐츠가 동적으로 생성되어 span 태그에 추가됩니다. 마우스를 밖으로 이동할 때 동적으로 추가된 레이어를 밖으로 이동합니다. 대략 다음과 같이 플로팅 레이어의 스타일을 설정해야 합니다.

으아악

span 的 z-index의 z-index 속성 변경에 주의가 필요합니다. 플로팅 레이어가 내장되어 있어 플로팅 레이어가 가려질 수 있기 때문입니다.

2.JS 동적 조정

플로팅 레이어의 크기가 고정된 경우 JS를 사용하여 현재 선택한 아이콘을 가져오고 상대 위치를 읽은 다음 플로팅 레이어의 위치를 ​​계산하기만 하면 됩니다.

으아악