cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej

Bagaimana untuk menetapkan teks dalam css apabila tetikus diletakkan pada imej

WBOY
WBOYasal
2021-11-15 18:00:4317217semak imbas

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>

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;
display:none;
text-decoration:none;
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>

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!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk menetapkan jarak antara huruf dalam perkataan dalam cssArtikel seterusnya：Bagaimana untuk menetapkan jarak antara huruf dalam perkataan dalam css

Artikel berkaitan

Lihat lagi