Maison > Article > interface Web > Comment définir le texte en CSS lorsque la souris est placée sur l'image

Comment définir le texte en CSS lorsque la souris est placée sur l'image

WBOYoriginal: 2021-11-15 18:00:4317189parcourir

Méthode CSS pour définir le texte à afficher lorsque la souris est placée sur l'image : 1. Ajoutez le style "display:none;" à l'élément de texte pour le masquer. 2. Utilisez l'élément "parent : survolez l'élément de texte { display:block;}" Instruction pour implémenter la souris L'effet de l'affichage du texte sur l'image.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir le texte à afficher sur l'image avec CSS

1. Utilisez

et et

Le code est le suivant :

<div>
<span>这是要在图片上出现的文字</span>
</div>

2. Ajoutez une image d'arrière-plan à l'élément div et définissez la taille ; ajoutez le style "display:none;" à l'élément de texte pour qu'il ne s'affiche pas. comme suit :

background-image:url(图片名称);
width:250px;
height:100px;
background-position:center;

display:none;
text-decoration:none;

3. Utilisez le sélecteur de survol Faites apparaître le texte lorsque la souris est placée sur l'image, le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css" >
.a{
background-image:url(1115.08.png);
width:250px;
height:100px;
background-position:center;
 }
 .a span{
display:none;
text-decoration:none;}
.a:hover span{
display:block;
position:absolute;
top:0;
left:0;
color:blue;}
</style>
</head>
<body>
<div class="a">
<span>这是一副山水画</span>
</div>
</body>
</html>

Résultats de sortie, lorsque la souris n'est pas sur l'image :

Comment définir le texte en CSS lorsque la souris est placée sur limage

;

Lorsque la souris est sur l'image :

Comment définir le texte en CSS lorsque la souris est placée sur limage

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos de programmation ! !

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir l'espacement entre les lettres dans un mot en CSSArticle suivant：Comment définir l'espacement entre les lettres dans un mot en CSS

Articles Liés

Voir plus