Bagaimanakah Saya Boleh Memaparkan Pratonton Halaman Langsung dalam Pop Timbul Apabila Melayang Di Atas Pautan Menggunakan iframes?

Memaparkan Pratonton Halaman Langsung pada Tetikus Menggunakan iframe

Untuk membuat pratonton halaman langsung yang muncul dalam pop timbul kecil apabila tetikus menuding pada pautan , pertimbangkan untuk menggunakan iframe. Berikut ialah pendekatan langkah demi langkah:

1. Buat bekas iframe: Tentukan kelas CSS untuk bekas iframe, seperti ".box," dan gayakannya menjadi pada mulanya disembunyikan dengan "display: none;".
2. Letakkan iframe: Letakkan bekas iframe berbanding pautan menggunakan peraturan CSS. Sebagai contoh, anda boleh menggunakan "kedudukan: relatif;" pada bekas iframe dan "kedudukan: mutlak;" pada iframe itu sendiri.
3. Kawal keterlihatan: Gunakan pemilih CSS untuk mengawal keterlihatan bekas iframe. Sebagai contoh, anda boleh menentukan "a:hover .box, .box:hover { display: block; }" untuk menjadikan bekas muncul pada tetikus.
4. Benamkan iframe: Di dalam bekas iframe, masukkan elemen iframe dengan URL halaman yang diingini yang anda mahu pratonton. Tentukan dimensi iframe dengan sewajarnya.

Contoh Kod:

<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>

Kod ini akan mencipta pop timbul kecil yang mengandungi pratonton langsung halaman Wikipedia apabila tetikus melayang di atas pautan. Pop timbul akan kekal kelihatan selagi kursor kekal dalam sempadannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Pratonton Halaman Langsung dalam Pop Timbul Apabila Melayang Di Atas Pautan Menggunakan iframes?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!