Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css

青灯夜游

Lepaskan： 2022-09-22 17:49:56

asal

4737 orang telah melayarinya

Dalam CSS, anda boleh menggunakan pemilih ":hover" dan atribut paparan untuk menyembunyikan gaya paparan apabila tetikus melepasinya, anda hanya perlu menggunakan pemilih ":hover" untuk memilih elemen dihidupkan yang penunjuk tetikus terapung, dan berikannya Hanya tetapkan gaya "display:none;" untuk elemen status dan sintaks ialah "specify element:hover {display:none;}".

Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css

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

Dalam CSS, anda boleh menggunakan pemilih ":hover" dan atribut paparan untuk menyembunyikan gaya paparan apabila tetikus berlalu.

Hanya gunakan pemilih ":hover" untuk memilih elemen yang menuding tetikus terapung dan tetapkan gaya "display:none;" kepada elemen dalam keadaan ini untuk menyembunyikannya.

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 520px;
				height: 50px;
				background-color: #008000;
				
			}
			div:hover {
				display:none;
			}
		</style>
	</head>
	<body>
		<div>
			hello
		</div>
	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css

Penerangan:

:pemilih tuding

:pemilih tuding digunakan untuk memilih elemen yang menuding tetikus terapung.

Petua: Pemilih :hover boleh digunakan pada semua elemen, bukan hanya pautan.

Dalam takrifan CSS, :hover mesti datang selepas :link dan :visited (jika ada) untuk gaya berkuat kuasa.
:pemilih pautan menetapkan gaya pautan yang menghala ke halaman yang tidak dilawati, :pemilih yang dilawati digunakan untuk menetapkan pautan ke halaman yang dilawati dan :pemilih aktif digunakan untuk pautan aktif.

Penggunaan 1:

Ini bermakna: apabila tetikus melayang di atas gaya a, warna latar belakang a ditetapkan kepada kuning

a:hover
    { 
        background-color:yellow;
    }

Salin selepas log masuk

Ini adalah penggunaan yang paling biasa, ia hanya menukar gaya melalui

Penggunaan 2:

Gunakan a untuk mengawal gaya blok lain:

Gunakan a untuk mengawal elemen anak a b:

    .a:hover .b {
            background-color:blue;
        }

Salin selepas log masuk

Gunakan a untuk mengawal elemen adik beradik a c (unsur adik beradik):

.a:hover + .c {
        color:red;
    }

Salin selepas log masuk

Gunakan a untuk mengawal a Elemen terdekat d:

.a:hover ~ .d {
        color:pink;
    }

Salin selepas log masuk

Untuk meringkaskan:

1. Tambah apa-apa di tengah untuk mengawal elemen kanak-kanak; . ' ' Kawal elemen adik beradik (unsur adik beradik);

3. '~' mengawal elemen berdekatan; kotak Dalam keadaan bergerak, apabila tetikus bergerak ke atas butang, kotak itu berhenti bergerak Apabila tetikus menjauh, kotak itu terus bergerak. gaya:

"paparan:tiada;" gaya

paparan:tiada sesiapa yang boleh menyembunyikan elemen tanpa menduduki ruang, jadi apabila menukar atribut ini secara dinamik Ia akan menyebabkan penyusunan semula (tukar susun atur halaman), yang boleh difahami sebagai memadamkan elemen dari halaman itu tidak akan diwarisi oleh keturunan, tetapi keturunannya tidak akan dipaparkan, selepas semua, mereka adalah; semua tersembunyi bersama.

<body>
    <div class="btn stop">stop</div>
    <div class="animation"></div>
</body>

Salin selepas log masuk

<style>
    .animation {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px auto;
        animation: move 2s infinite alternate;
        -webkit-animation: move 2s infinite alternate;
    }
    @keyframes move {
        0% {
            transform: translate(-100px, 0);
        }
        100% {
            transform: translate(100px, 0);
        }
    }
    .btn {
        padding: 20px 50px;
        background-color: pink;
        color: white;
        display: inline-block;
    }
    .stop:hover ~ .animation {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
</style>

Salin selepas log masuk

(Mempelajari perkongsian video: Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css bahagian hadapan web

)

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!