Comment puis-je afficher des aperçus de page en direct dans une fenêtre contextuelle lorsque je survole des liens à l'aide d'iframe ?

Affichage des aperçus de page en direct au survol de la souris à l'aide d'iframes

Pour créer des aperçus de page en direct qui apparaissent dans une petite fenêtre contextuelle lorsque la souris survole un lien , pensez à utiliser des iframes. Voici une approche étape par étape :

1. Créez un conteneur iframe : Définissez une classe CSS pour le conteneur iframe, telle que ".box", et stylisez-la pour qu'elle soit initialement masqué avec "display: none;".
2. Positionnez l'iframe : Positionnez le conteneur iframe par rapport au lien à l'aide des règles CSS. Par exemple, vous pouvez utiliser « position : relative ; » sur le conteneur iframe et "position: absolue;" sur l'iframe lui-même.
3. Contrôler la visibilité : Utilisez les sélecteurs CSS pour contrôler la visibilité du conteneur iframe. Par exemple, vous pouvez spécifier "a:hover .box, .box:hover { display: block; }" pour que le conteneur apparaisse au survol de la souris.
4. Intégrer l'iframe : À l'intérieur du conteneur iframe, insérez un élément iframe avec l'URL souhaitée de la page que vous souhaitez prévisualiser. Spécifiez les dimensions de l'iframe en conséquence.

Exemple de code :

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

Ce code créera une petite fenêtre contextuelle contenant un aperçu en direct de la page Wikipédia lorsque la souris survole le lien. La popup restera visible tant que le curseur reste dans ses limites.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!