Comment créer une fenêtre contextuelle d'aperçu en direct au survol de la souris pour les pages liées ?

Affichage d'un aperçu en direct au survol de la souris avec des pages liées

Dans cet article, nous explorerons comment créer une fonctionnalité qui affiche un aperçu en direct d'une page liée dans une petite fenêtre contextuelle lorsque l'utilisateur survole le lien.

Semblable à la fonctionnalité démontrée sur cssglobe.com, nous visons à implémenter une fenêtre contextuelle qui affiche un aperçu en direct de la page liée au survol de la souris. Cependant, dans notre cas, nous allons l'améliorer pour afficher du contenu en direct.

Solution

En utilisant une iframe, nous pouvons intégrer un aperçu en direct de la page au survol de la souris :

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

Dans cette solution, un div caché est associé à chaque lien, contenant une iframe pour afficher l'aperçu en direct. Lorsque l'utilisateur survole le lien ou le div, le div devient visible, positionné par rapport au lien, et apparaît au-dessus des autres éléments grâce au z-index.

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!