Bagaimana untuk Membuat Pop Timbul Pratonton Langsung pada Mouseover untuk Halaman Terpaut?

Memaparkan Pratonton Langsung pada Tetikus dengan Halaman Terpaut

Dalam artikel ini, kami akan meneroka cara mencipta ciri yang memaparkan pratonton langsung daripada halaman terpaut dalam pop timbul kecil apabila pengguna menuding pada pautan.

Serupa dengan fungsi yang ditunjukkan pada cssglobe.com, kami menyasarkan untuk melaksanakan pop timbul yang menunjukkan pratonton langsung halaman terpaut pada tetikus. Walau bagaimanapun, dalam kes kami, kami akan meningkatkannya untuk memaparkan kandungan langsung.

Penyelesaian

Menggunakan iframe, kami boleh memasukkan pratonton langsung halaman pada tetikus :

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

Dalam penyelesaian ini, div tersembunyi dikaitkan dengan setiap pautan, mengandungi iframe untuk memaparkan pratonton langsung. Apabila pengguna menuding pada pautan atau div, div menjadi kelihatan, diposisikan secara relatif kepada pautan dan muncul di atas elemen lain terima kasih kepada z-index.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pop Timbul Pratonton Langsung pada Mouseover untuk Halaman Terpaut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!