css3 tunjukkan hide

CSS3 ialah spesifikasi CSS terkini Kemunculannya menjadikan kesan reka bentuk web lebih berwarna. Salah satu fungsi yang biasa digunakan ialah untuk menunjukkan dan menyembunyikan.

Terdapat banyak cara untuk melaksanakan paparan dan penyembunyian dalam CSS3, yang diperkenalkan di bawah.

1 Gunakan atribut paparan

Atribut paparan boleh mengawal keadaan paparan elemen, termasuk:

• tiada: Sembunyikan elemen tanpa menggunakan ruang pada halaman tersebut.
• blok: Paparkan elemen sebagai elemen blok.
• sebaris: Paparkan elemen sebagai elemen sebaris.
• blok sebaris: Paparkan elemen sebagai elemen blok sebaris.

Dengan menukar nilai atribut paparan, elemen boleh dipaparkan dan disembunyikan. Sebagai contoh, kod berikut memaparkan imej apabila tetikus melayang di atas elemen:

img {
  display: none;
}

div:hover img {
  display: block;
}

Dalam kod di atas, sifat paparan awal imej ditetapkan kepada tiada, iaitu, ia tersembunyi. Kemudian melalui div:hover img, apabila tetikus melayang di atas elemen div, tetapkan atribut paparan imej untuk disekat untuk memaparkannya.

2 Gunakan atribut keterlihatan

Atribut keterlihatan mengawal keterlihatan elemen Tidak seperti atribut paparan, menetapkan atribut keterlihatan kepada tersembunyi akan tetap menempati ruang pada halaman. Nilainya termasuk:

• kelihatan: Unsur boleh dilihat.
• tersembunyi: Elemen tidak kelihatan tetapi masih mengambil ruang halaman.

Kod berikut melaksanakan paparan kandungan teks apabila tetikus melayang di atas elemen:

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

Dalam kod di atas, atribut keterlihatan awal elemen div ditetapkan kepada tersembunyi, iaitu tersembunyi berdiri. Kemudian melalui div:hover, apabila tetikus melayang di atas elemen div, atribut keterlihatan elemen ditetapkan kepada boleh dilihat, yang memaparkannya.

3. Gunakan atribut kelegapan

Atribut kelegapan mengawal ketelusan elemen adalah dari 0 hingga 1. 0 bermaksud telus sepenuhnya dan 1 bermaksud legap sepenuhnya. Dengan menukar nilai atribut kelegapan elemen, elemen boleh ditunjukkan dan disembunyikan. Sebagai contoh, kod berikut melaksanakan kesan elemen pudar masuk dan keluar apabila tetikus melayang di atasnya:

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

Dalam kod di atas, atribut kelegapan awal elemen div ditetapkan kepada 0, yang adalah telus sepenuhnya. Kemudian melalui div:hover, apabila tetikus melayang di atas elemen div, tetapkan sifat kelegapan elemen kepada 1, iaitu legap sepenuhnya. Pada masa yang sama, atribut peralihan ditambah untuk mencapai kesan fade-in dan fade-out.

Di atas adalah beberapa cara untuk menggunakan CSS3 untuk memaparkan dan menyembunyikan, anda boleh memilih mengikut keperluan anda. Perlu diingat bahawa CSS3 tidak serasi dengan beberapa versi pelayar lama, jadi isu keserasian harus diambil kira semasa menulis kod.

Atas ialah kandungan terperinci css3 tunjukkan hide. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!