recherche

Maison  >  Article  >  interface Web  >  Comment afficher la police au survol de l'image ?

Comment afficher la police au survol de l'image ?

WBOY
WBOYavant
2023-09-13 08:09:022891parcourir

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

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>

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>

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>

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!

css html 指针 事件 伪类
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Exécuter le script lorsque le fichier est prêt à démarrer la lecture en HTML ?Article suivant：Exécuter le script lorsque le fichier est prêt à démarrer la lecture en HTML ?

Articles Liés

Voir plus