Bagaimana untuk mengawal paparan dan menyembunyikan dengan css

CSS ialah teknologi yang digunakan untuk mengawal gaya halaman web, yang membolehkan kami mencapai banyak kesan yang cantik. Apabila kami ingin mencapai beberapa kesan interaktif pada halaman, kami boleh menggunakan CSS untuk mengawal paparan dan penyembunyian elemen.

Dalam pembangunan tapak web moden, kami selalunya perlu melaksanakan beberapa kesan interaktif untuk meningkatkan pengalaman pengguna. Sebagai contoh, apabila pengguna mengklik butang, beberapa kandungan pada halaman akan muncul atau hilang. CSS mengawal paparan dan menyembunyikan elemen adalah salah satu teknologi utama untuk mencapai jenis kesan ini.

Secara khusus, atribut paparan diperlukan untuk memaparkan dan menyembunyikan elemen. Atribut ini boleh mengambil nilai berikut:

• blok: menjadikan elemen sebagai elemen peringkat blok, iaitu, menduduki baris berasingan pada halaman.
• tiada: Alih keluar elemen sepenuhnya daripada halaman, iaitu ia tidak menduduki sebarang ruang.
• sebaris: Menjadikan elemen sebagai elemen sebaris, iaitu, dipaparkan bersebelahan dengan elemen lain pada baris yang sama.
• blok sebaris: Kemukakan elemen sebagai elemen peringkat blok sebaris, iaitu, dipaparkan bersebelahan dengan elemen lain dalam baris yang sama, tetapi anda boleh menetapkan atribut seperti lebar dan tinggi.

Sebagai contoh, kami ingin menyedari kesan mengklik butang pada halaman untuk menunjukkan atau menyembunyikan perenggan. Ini boleh dicapai dengan kod berikut:

Kod HTML:

<button id="toggle-btn">显示/隐藏段落</button>
<p id="hidden-para">这是一个隐藏的段落</p>

Kod CSS:

#hidden-para {
  display: none;
}

Kod JavaScript:

var btn = document.getElementById('toggle-btn');
var para = document.getElementById('hidden-para');
btn.addEventListener('click', function() {
  if (para.style.display === 'none') {
    para.style.display = 'block';
  } else {
    para.style.display = 'none';
  }
});

dalam Dalam kod di atas, kami mula-mula menetapkan atribut paparan perenggan kepada tiada, yang bermaksud unsur itu pada mulanya tersembunyi. Kemudian gunakan kod JavaScript untuk mendengar peristiwa klik butang dan tentukan nilai atribut paparan perenggan semasa untuk mencapai kesan menunjukkan atau menyembunyikan.

Selain menggunakan JavaScript, kami juga boleh menggunakan kelas pseudo :hover CSS untuk mencapai kesan menunjukkan/menyembunyikan elemen apabila tetikus melayang. Sebagai contoh, apabila kita perlu memaparkan menu lungsur turun dalam halaman, kita boleh mencapainya melalui kod berikut:

Kod HTML:

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

Kod CSS:

.dropdown-content {
  display: none;
}
.dropdown:hover .dropdown-content {
  display: block;
}

Dalam kod di atas, kami mula-mula menetapkan kandungan menu lungsur ke keadaan tersembunyi. Kemudian gunakan :hover pseudo-class untuk mendengar acara hover tetikus dan tetapkan nilai atribut paparan .dropdown-content untuk disekat untuk mencapai kesan paparan menu lungsur.

Secara amnya, dengan menggunakan CSS untuk mengawal paparan dan penyembunyian elemen, kami boleh menjadikan halaman lebih interaktif dan meningkatkan pengalaman pengguna. Dalam proses pembangunan sebenar, kami boleh menggabungkan JavaScript untuk mencapai kesan yang lebih kompleks dan menjadikan tapak web lebih cantik dan lebih mudah untuk digunakan.

Atas ialah kandungan terperinci Bagaimana untuk mengawal paparan dan menyembunyikan dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!