iframe을 사용하여 링크 위로 마우스를 가져갈 때 팝업에 라이브 페이지 미리 보기를 표시하려면 어떻게 해야 합니까?

iframe을 사용하여 마우스 오버 시 라이브 페이지 미리보기 표시

마우스를 링크 위로 가져갈 때 작은 팝업에 나타나는 라이브 페이지 미리보기를 생성하려면 , iframe 활용을 고려해보세요. 단계별 접근 방식은 다음과 같습니다.

1. iframe 컨테이너 만들기: ".box"와 같은 iframe 컨테이너에 대한 CSS 클래스를 정의하고 스타일을 지정합니다. 처음에는 "display: none;"으로 숨겨져 있습니다.
2. iframe 위치 지정: CSS 규칙을 사용하여 링크를 기준으로 iframe 컨테이너의 위치를 ​​지정합니다. 예를 들어 "위치: 상대;"를 사용할 수 있습니다. iframe 컨테이너 및 "위치: 절대;" iframe 자체에서.
3. 가시성 제어: CSS 선택기를 사용하여 iframe 컨테이너의 가시성을 제어합니다. 예를 들어 "a:hover .box, .box:hover { display: block; }"을 지정하면 마우스 오버 시 컨테이너가 표시됩니다.
4. iframe을 삽입하세요. iframe 컨테이너에 미리 보려는 페이지의 원하는 URL이 포함된 iframe 요소를 삽입하세요. 이에 따라 iframe의 크기를 지정하세요.

예제 코드:

<code class="css">.box {
  display: none;
  width: 100%;
}

a:hover + .box,
.box:hover {
  display: block;
  position: relative;
  z-index: 100;
}</code>

<code class="html">This live preview for <a href="https://en.wikipedia.org/">Wikipedia</a>
<div class="box">
  <iframe src="https://en.wikipedia.org/" width="500px" height="500px"></iframe>
</div></code>

이 코드는 다음의 실시간 미리보기가 포함된 작은 팝업을 생성합니다. 링크 위에 마우스를 올리면 Wikipedia 페이지로 이동합니다. 커서가 경계 내에 있는 한 팝업은 계속 표시됩니다.

위 내용은 iframe을 사용하여 링크 위로 마우스를 가져갈 때 팝업에 라이브 페이지 미리 보기를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!