Rumah >hujung hadapan web >tutorial css >Bagaimana untuk mencapai kesan memaparkan dan menyembunyikan div apabila tetikus dialihkan ke div dalam css3

Bagaimana untuk mencapai kesan memaparkan dan menyembunyikan div apabila tetikus dialihkan ke div dalam css3

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal: 2021-12-07 18:15:188038semak imbas

Dalam CSS, anda boleh menggunakan pemilih ":hover" dan atribut kelegapan untuk memaparkan atau menyembunyikan elemen div apabila tetikus bergerak kepadanya Sintaksnya ialah "div:hover{opacity:0}" atau "div:hover{opacity:1}".

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

Cara mencapai kesan menunjukkan dan menyembunyikan div dengan menggerakkan tetikus ke div dalam css3

1 div untuk memaparkan div

Ya Gunakan pemilih :hover dan atribut kelegapan untuk menggerakkan tetikus ke div untuk memaparkan kesan div Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 380px;
                height: 250px;
                background-image: url(1118.02.png);
                opacity: 0; 
            }
            div:hover{
               width: 380px;
                height: 250px;
                background-image: url(1118.02.png);
                opacity: 1; 
            }
        </style>
    </head>
    <body>
        <div>鼠标移动到div上</div>
    </body>
</html>

Hasil keluaran :

2. Tetikus Alihkan ke div untuk menyembunyikan div

Anda masih boleh menggunakan pemilih :hover dan atribut kelegapan untuk merealisasikan kesan menggerakkan tetikus untuk div untuk memaparkan div. Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 380px;
                height: 250px;
                background-image: url(1118.02.png);
            }
            div:hover{
               opacity: 0; 
            }
        </style>
    </head>
    <body>
        <div>鼠标移动到div上</div>
    </body>
</html>

Hasil keluaran:

(Perkongsian video pembelajaran: video css tutorial)

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan memaparkan dan menyembunyikan div apabila tetikus dialihkan ke div dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 选择器

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：Apakah kod yang tersembunyi dalam klik cssArtikel seterusnya：Apakah kod yang tersembunyi dalam klik css

Artikel berkaitan

Lihat lagi