Comment afficher la police au survol de l'image ?
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énementonmouseover 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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" 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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" 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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" 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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Détails du chemin du dossier de polices Win10
Jan 03, 2024 pm 08:37 PM
Lors de la saisie de texte, de nombreux amis aiment ajouter leurs polices personnalisées préférées, mais ils ne savent pas où se trouve le chemin du dossier de polices du système win10 et ne peuvent pas ajouter de polices. Ce qui suit vous présentera le chemin du dossier spécifique. Chemin du dossier des polices Win10 : 1. Cliquez sur « Ce PC » sur le bureau. 2. Entrez le lecteur C du disque système. 3. Cliquez sur le dossier « Windows ». 4. Déroulez vers le bas pour trouver le dossier « Polices ». 5. Vous pouvez accéder à la bibliothèque de polices. Les amis qui ont d'autres questions peuvent y jeter un œil pour en savoir plus sur les problèmes courants liés aux polices Win10 ~
Comment changer la police dans Outlook sur un téléphone mobile Apple
Mar 08, 2024 pm 04:46 PM
Comment changer la police dans Outlook sur un téléphone mobile Apple ? Ouvrez d'abord le logiciel Outlook et cliquez sur le fichier dans le coin supérieur gauche de l'interface. Vous pouvez définir la police selon vos propres préférences. Une fois les paramètres terminés, cliquez sur le bouton OK. Nous allons jeter un coup d'oeil! Comment changer la police dans Outlook sur un téléphone mobile Apple 1. Ouvrez le logiciel Outlook et cliquez sur l'option "Fichier" dans le coin supérieur gauche de l'interface. 2. Dans la liste qui apparaît, recherchez « Options » et cliquez pour entrer. 3. Sur le côté gauche de la liste des options, cliquez sur « Mail ». 4. Ensuite, sélectionnez « Lettre et polices ». 5. Si vous souhaitez définir la police pour les nouveaux e-mails, les réponses aux e-mails ou la composition, cliquez sur l'option correspondante pour saisir les paramètres. 6. Définissez la police selon vos préférences personnelles. Une fois le réglage terminé, cliquez sur OK.
Comment résoudre le problème de flou de police Win11
Jan 13, 2024 pm 09:00 PM
Après la mise à jour du système Win11, certains amis ont trouvé que leurs polices Win11 étaient floues et très inconfortables à utiliser. Cela peut être dû à un bug dans la version du système, ou il se peut que nous ayons activé des effets spéciaux. Voyons comment le résoudre. Les polices Win11 sont floues : Méthode 1 : 1. Tout d'abord, cliquez avec le bouton droit sur cet ordinateur et ouvrez « Propriétés » 2. Entrez ensuite « Paramètres système avancés » dans le lien correspondant 3. Cliquez ensuite sur « Paramètres » dans Performances pour l'ouvrir. 4. Sous « Effets visuels », cochez « Ajuster pour obtenir les meilleures performances » et cliquez sur « OK » pour enregistrer. Méthode 2 : 1. Cliquez avec le bouton droit sur un espace vide du bureau et ouvrez « Paramètres d'affichage ». 2. Cliquez sur « Zoom » sous Zoom et mise en page 3. Cliquez ensuite sur « Taille du texte » sous les paramètres pertinents.
Comment changer la police du Xiaomi 11_Comment changer la police du Xiaomi 11
Mar 25, 2024 pm 07:26 PM
1. Ouvrez les paramètres du téléphone et cliquez sur [Afficher]. 2. Cliquez sur [Police]. 3. Sélectionnez la police que vous aimez ou cliquez sur [Plus de polices] pour télécharger l'application.
Comment agrandir la police du téléphone mobile Vivo et où la définir
Feb 24, 2024 pm 06:16 PM
Comment agrandir la taille de la police du téléphone mobile Vivo ? Où puis-je la définir ? Dans le téléphone mobile Vivo, vous pouvez agrandir la taille de la police, mais la plupart des utilisateurs ne savent pas comment définir la taille de la police du téléphone mobile Vivo. , l'éditeur vous explique comment agrandir la taille de la police du téléphone mobile vivo. Méthode tutoriels graphiques, les utilisateurs intéressés viennent y jeter un œil ! Tutoriel d'utilisation du téléphone mobile Vivo Comment agrandir la taille de la police du téléphone mobile Vivo Où la définir 1. Ouvrez d'abord la fonction [Paramètres] dans le téléphone mobile Vivo et cliquez dessus 2. Accédez ensuite à l'interface des paramètres et recherchez le bouton ; Fonction [Affichage et luminosité] ; 3. Accédez ensuite à la page dans l'image ci-dessous et cliquez sur le service [Taille et épaisseur de police] ; 4. Enfin, faites glisser la ligne horizontale dans l'image ci-dessous pour ajuster la taille de la police.
Explication détaillée de la méthode d'installation des polices Win11
Dec 27, 2023 pm 05:16 PM
Certains amis ne trouvent pas où sont installées leurs polices après avoir installé les polices win11, ils soulèvent donc la question de l'emplacement d'installation des polices win11. En fait, nous pouvons entrer dans la gestion des polices dans la personnalisation pour trouver l'emplacement où les polices sont installées. un coup d'oeil ci-dessous. Emplacement d'installation de la police Win11 : 1. Tout d'abord, cliquez avec le bouton droit sur un espace vide du bureau et ouvrez les paramètres « Personnalisation ». 2. Saisissez ensuite les paramètres de gestion de l'installation « Police ». 3. Recherchez la police souhaitée et saisissez-la. 4. Si vous ne le trouvez pas, vous pouvez également effectuer une recherche directement ci-dessus. 5. Après avoir entré la police, vous pouvez voir l'emplacement d'installation de la police win11 dans « Fichier de police » sous les métadonnées. 6. Si nous souhaitons désinstaller la police, cliquez sur Désinstaller ici.
Un moyen efficace de résoudre le problème du flou des polices Linux
Jan 08, 2024 pm 11:25 PM
Les polices Linux sont floues. Comment puis-je faire en sorte que les polices apparaissent clairement ? Jetons un coup d'œil au didacticiel détaillé ci-dessous. 1. Installer les fichiers de polices 1. Téléchargez le fichier fourni par l'outil ci-dessus, puis faites glisser le fichier sur le bureau et décompressez-le. Comme le montre l'image ci-dessous, le fichier ayant été décompressé, il se présente sous la forme d'un dossier. 2. Ensuite, sans rien cliquer sur le bureau, cliquez avec le bouton droit et sélectionnez Ouvrir dans le terminal. Entrez la commande dans le terminal : sudodpkg-i et appuyez sur espace. Ouvrez le fichier de police décompressé sur le bureau et faites-y glisser le package deb un après le -i de cette commande. Une erreur apparaîtra après avoir appuyé sur Entrée, indiquant que la dépendance n'est pas installée. Si l'erreur de dépendance est demandée, la saisie de la commande est normale ; sinon, il s'agit d'une commande incorrecte. Les débutants doivent faire attention aux espaces et à la capitalisation.
Comment changer les polices dans le navigateur mobile QQ
Apr 07, 2024 pm 06:43 PM
Comment changer la police dans le navigateur mobile QQ ? De nombreuses personnes aiment utiliser le navigateur QQ sur les téléphones mobiles. Ce navigateur peut non seulement parcourir rapidement les pages Web, mais également traiter divers types de données de fichiers. De plus, ce navigateur dispose également de paramètres personnalisés. propres préférences. , de nombreux utilisateurs novices ne savent toujours pas comment modifier les polices de ce navigateur. Cet article vous donnera un aperçu des étapes pour modifier les polices dans le navigateur mobile QQ, dans l'espoir de vous aider à résoudre le problème. Liste des étapes pour modifier les polices dans le navigateur QQ mobile 1. Allumez le téléphone, puis cliquez pour ouvrir « Navigateur QQ » (comme indiqué sur l'image). 2. Sur la page « Mon » du navigateur QQ, cliquez sur le logo « Paramètres » dans le coin supérieur droit (comme indiqué sur l'image). 3. Dans les paramètres, cliquez pour entrer « Paramètres de police » (comme indiqué sur la figure)
