Bagaimana untuk mencapai kesan memaparkan dan menyembunyikan div apabila tetikus dialihkan ke div dalam css3-tutorial css-php.cn

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

WBOY

Lepaskan： 2021-12-07 18:15:18

asal

7922 orang telah melayarinya

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}".

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

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!