연결된 페이지에 대한 마우스 오버 시 실시간 미리보기 팝업을 만드는 방법은 무엇입니까?

링크된 페이지에서 마우스 오버 시 실시간 미리보기 표시

이 글에서는 실시간 미리보기를 표시하는 기능을 만드는 방법을 살펴보겠습니다. 사용자가 링크 위로 마우스를 가져가면 작은 팝업에 링크된 페이지가 표시됩니다.

cssglobe.com에서 시연된 기능과 유사하게 마우스 오버 시 링크된 페이지의 실시간 미리보기를 표시하는 팝업을 구현하는 것이 목표입니다. 하지만 우리의 경우 라이브 콘텐츠를 표시하도록 향상하겠습니다.

해결책

iframe을 활용하면 마우스 오버 시 페이지의 실시간 미리보기를 통합할 수 있습니다. :

<code class="javascript">.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> 
remains open on mouseover.</code>

이 솔루션에서는 실시간 미리보기를 표시하는 iframe을 포함하는 숨겨진 div가 각 링크와 연결됩니다. 사용자가 링크나 div 위로 마우스를 가져가면 div가 표시되고 링크를 기준으로 위치가 지정되며 Z-색인 덕분에 다른 요소 위에 나타납니다.

위 내용은 연결된 페이지에 대한 마우스 오버 시 실시간 미리보기 팝업을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!