Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej-tutorial css-php.cn

Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej

WBOY

Lepaskan： 2021-11-15 18:00:43

asal

17201 orang telah melayarinya

Kaedah css untuk menetapkan teks supaya muncul apabila tetikus diletakkan pada imej: 1. Tambahkan gaya "display:none;" pada elemen teks untuk menyembunyikannya; elemen {display:block;} pernyataan " mencapai kesan paparan teks apabila tetikus diletakkan pada gambar.

Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Kaedah css untuk menetapkan teks supaya muncul apabila tetikus diletakkan pada imej

1 ; untuk menentukan perkara yang akan muncul dalam imej Teks untuk muncul pada elemen HTML boleh digabungkan dengan

Kodnya adalah seperti berikut:

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

Salin selepas log masuk

2. Tambahkan imej latar belakang pada elemen div dan tambahkan "display:none;" pada rentang elemen teks supaya ia tidak dipaparkan ;

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

Salin selepas log masuk

display:none;
text-decoration:none;

Salin selepas log masuk

Keluarkan hasil apabila tetikus tiada pada gambar :

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

Salin selepas log masuk

Apabila tetikus berada pada gambar:

Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video pengaturcaraan Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej ! !

Atas ialah kandungan terperinci Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!