Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css
Bagaimana untuk menyembunyikan gaya paparan apabila tetikus melalui css
- 青灯夜游asal
- 2022-09-22 17:49:564731semak imbas
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;}".
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>
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;
}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;
}Gunakan a untuk mengawal elemen adik beradik a c (unsur adik beradik):
.a:hover + .c {
color:red;
}Gunakan a untuk mengawal a Elemen terdekat d:
.a:hover ~ .d {
color:pink;
}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><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> (Mempelajari perkongsian video: 
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!