Comment afficher la police au survol de l'image ?-tutoriel HTML-php.cn

Comment afficher la police au survol de l'image ?

WBOY

Libérer： 2023-09-13 08:09:02

avant

2837 Les gens l'ont consulté

Comment afficher la police au survol de limage ?

La tâche que nous allons effectuer dans cet article est de savoir comment afficher les polices lorsque vous passez la souris sur une image. Plongeons dans cet article et jetons un coup d'œil rapide au survol et au survol de la souris en HTML.

L'événement

onmouseover en HTML est déclenché lorsque le pointeur de la souris touche un élément. Lorsque le pointeur de la souris quitte un élément, un événement appelé onmouseout se produit.

La pseudo-classe CSS :hover correspond lorsque l'utilisateur interagit avec un élément à l'aide d'un périphérique de pointage, mais elle n'est pas toujours activée. Normalement, il est activé lorsque l'utilisateur passe le curseur sur l'élément (pointeur de la souris).

Grammaire

Voici la syntaxe pour hover -

:hover

Copier après la connexion

Pour mieux comprendre l’affichage des polices lors du survol d’une image, regardons l’exemple suivant.

Exemple

Dans l'exemple ci-dessous, nous rendons la police visible lorsque la souris passe sur l'image.

<!DOCTYPE html>
<html>
   <body>
      <style>
      .img {
         position: relative;
         width: 200px;
         height: 200px;
         float: left;
         margin-right: 10px;
      }
      .img div{
         position: absolute;
         bottom: 0;
         right: 0;
         background: black;
         color: white;
         margin-bottom: 5px;
         visibility: hidden;
      }
      .img:hover{
         cursor: pointer;
      }
      .img:hover div{
         width: 150px;
         padding: 8px 15px;
         visibility: visible;
         opacity: 0.7;
      }
      </style>
      <div class="img">
         <img  src='https://www.tutorialspoint.com/html/images/html-mini-logo.jpg'    style="max-width:90%"  style="max-width:90%" alt="Comment afficher la police au survol de l'image ?" >
         <div>TP HTML LOGO</div>
      </div>
      <div class="img">
         <img  src='https://www.tutorialspoint.com/java/images/java-mini-logo.jpg'    style="max-width:90%"  style="max-width:90%" alt="Comment afficher la police au survol de l'image ?" >
         <div>TP JAVA LOGO</div>
      </div>
   </body>
</html>

Copier après la connexion

Lorsque le script s'exécute, il génère une sortie qui affiche l'image sur la page Web. Si l'utilisateur survole l'image, il affichera une description textuelle de cette image spécifique sur la page.

Exemple

Dans l'exemple ci-dessous, nous faisons apparaître la police lorsque la souris passe sur l'image, et couvrons l'intégralité de l'image.

<!DOCTYPE html>
<html>
   <body>
      <style>
      .tutorial {
         position: relative;
         max-width: 500px;
      }
      .tutorial img { width: 100%; }
      .fulltext {
         box-sizing: border-box;
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0; left: 0;
         text-align: center;
         padding-top: 30%;
         background-color: #EAFAF1 ;
         color: black;
      }
      .fulltext {
         visibility: none; opacity: 0;
         transition: opacity 0.3s;
      }
      .tutorial:hover .fulltext {
      visibility: visible; opacity: 1;
      }
      </style>
      <div class="tutorial">
         <img  src=https://www.tutorialspoint.com/java/images/java-mini-logo.jpg alt="Comment afficher la police au survol de l'image ?" >
         <div class="fulltext">
            LEARN JAVA...!<br>
         </div>
      </div>
   </body>
</html>

Copier après la connexion

Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra pour afficher l'image sur la page Web. Si l'utilisateur déplace la souris sur l'image, un texte couvrant toute l'image s'affichera.

Exemple

Exécutez le code suivant et observez comment la police apparaît lorsque vous passez la souris sur l'image.

<!DOCTYPE html>
<html>
   <body>
      <style>
      div {
         position: relative;
         top: 0px;
         left: 0px;
         width: 400px;
         height: 400px;
         border-radius: 50%;
         overflow: hidden;
         text-align: center
      }
      img {
         width: 400px;
         height: 400px;
         position: absolute;
         border-radius: 50%
      }
      img:hover {
         opacity: 0;
         transition:opacity 2s;
      }
      heading {
         line-height: 40px;
         font-weight: bold;
         text-align: center;
         position: absolute;
         display: block
      }
      div p {
         width: 420px;
         line-height: 20px;
         display: inline-block;
         padding: 200px 0px;
         vertical-align: middle;
         height: 450px
      }
      </style>
      <div>
         <img  src="https://www.tutorialspoint.com/static/images/logo-color.png" alt="Comment afficher la police au survol de l'image ?" >
         <p>Welcome to Tutorialspoint</p>
      </div>
   </body>
</html>

Copier après la connexion

Lorsque le script est exécuté, une fenêtre de sortie apparaîtra, faisant apparaître l'image sous forme de cercle sur la page Web. Lorsque l'utilisateur survole l'image, le texte s'affiche.

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!