Atoz CSS Petua Pantas: Menggunakan Hover dan Ketinggian

Artikel ini adalah sebahagian daripada siri Atoz CSS. Anda boleh mencari entri lain dalam siri ini di sini:

Lihat siri penuh Lihat video penuh dan rekod teks kesan hover

Selamat datang ke siri Atoz CSS kami! Dalam siri ini, saya akan bermula dengan huruf dalam abjad dan meneroka nilai CSS yang berbeza (dan sifat). Kami tahu bahawa kadang -kadang tangkapan skrin tidak mencukupi, dan dalam jawatan ini kami telah menambah tip baru untuk anda mengenai kesan melayang.

h bermaksud hover dan ketinggian

Mengenai kesan hover, saya telah memperkenalkan banyak dalam video mengenai huruf H, jadi saya tidak akan pergi ke butiran di sini. Walau bagaimanapun, anda boleh menggunakan beberapa animasi yang sejuk ke keadaan hover. Cari "Kesan Hover CSS" di Google dan anda akan mendapat banyak.

Berikut adalah beberapa laman web dengan kesan pintar:

codrops: kesan hover peralihan CSS
Shack Design: Copy Paste Hover Effects
CSS-Tricks: Pop Hovers

Juga, saya baru -baru ini membuat video untuk Sekolah Kod, semua tentang perpustakaan yang dipanggil Hover.css.

Satu lagi harta CSS H (saya tidak menerangkannya secara terperinci di laman web ini) adalah ketinggian (ketinggian).

Atribut ketinggian

digunakan untuk menentukan ketinggian kandungan elemen. Semua unit panjang standard (seperti PX, EM, REM, %, VW, VH dan unit lain) boleh digunakan untuk mengawal ketinggian.

Jika ketinggian elemen tidak ditetapkan secara eksplisit, ia dikira sebagai ketinggian minimum yang menampung semua elemen yang terkandung (sepadan dengan auto nilai lalai).

Secara umumnya disyorkan untuk mengelakkan ketinggian menetapkan secara eksplisit pada mana -mana elemen, kerana ia mengehadkan fleksibiliti elemen - yang bermaksud ia tidak dapat berkembang sebagai perubahan kandungan. Ini amat penting dalam reka bentuk responsif apabila kandungan perlu disusun semula secara menegak kerana perubahan lebar yang tersedia.

Oleh itu, saya cenderung untuk menetapkan ketinggian hanya pada unsur -unsur dengan saiz yang telah ditetapkan, seperti imej. Kes penggunaan lain ialah apabila menggunakan kedudukan mutlak atau tetap, ketinggian (dan lebar) mengecil di sekitar unsur kedudukan.

Contoh berikut menunjukkan masalah menetapkan ketinggian tetap.

Lihat kod sampel

Walaupun set pertama teks kelihatan betul, apabila teks lebih pendek atau lebih lama daripada gaya, gaya tidak lagi betul - kotak inklusi kelihatan terlalu besar, atau teks melimpah di luar kotak.

Satu cara untuk membetulkan limpahan teks adalah dengan menggunakan harta limpahan, tetapi ini memotong teks dan menjadikannya tidak boleh dibaca.

Ini boleh dielakkan sepenuhnya jika ketinggian tidak ditentukan pada mulanya. Jika saya dapat meningkatkan fleksibiliti kod tanpa melakukan apa -apa, saya akan memilih untuk melakukannya tanpa ragu -ragu!

Soalan Lazim Mengenai CSS Hover Heights (FAQs)

Apakah kesan hover CSS dan bagaimana ia berfungsi?

Kesan Hover CSS adalah kelas pseudo yang menggunakan gaya apabila penunjuk tetikus melayang ke atas elemen. Ia sering digunakan untuk membuat kesan interaktif di laman web, seperti menukar warna butang apabila tetikus melayang di atasnya. Kesan hover digunakan dengan menggunakan pemilih ": hover" diikuti oleh atribut CSS untuk diubah. Sebagai contoh, untuk menukar warna latar belakang butang ke merah apabila tetikus melayang di atasnya, anda boleh menggunakan kod berikut:

<code class="language-css">button:hover {
  background-color: red;
}</code>

Bagaimana untuk menukar ketinggian elemen menggunakan kesan hover CSS?

anda boleh mengubah ketinggian elemen menggunakan kesan hover CSS dengan menentukan ketinggian baru dalam peraturan hover. Sebagai contoh, jika anda ingin meningkatkan ketinggiannya apabila tetikus anda melayang di atas elemen Div, anda boleh menggunakan kod berikut:

<code class="language-css">div:hover {
  height: 200px;
}</code>

Dalam contoh ini, apabila tetikus melayang di bahagian div, ketinggian div akan berubah menjadi 200px.

Bolehkah saya menggunakan kesan hover CSS dengan pertanyaan media?

Ya, anda boleh menggunakan kesan hover CSS dengan pertanyaan media untuk membuat kesan hover responsif. Sebagai contoh, anda boleh menggunakan pertanyaan media untuk menggunakan kesan hover hanya jika skrin mempunyai lebar tertentu. Berikut adalah contoh:

<code class="language-css">@media (min-width: 600px) {
  div:hover {
    height: 200px;
  }
}</code>

Dalam contoh ini, kesan hover hanya digunakan jika lebar skrin sekurang -kurangnya 600px.

Bolehkah saya menukar pelbagai sifat menggunakan kesan hover css sekaligus?

Ya, anda boleh menukar pelbagai sifat menggunakan kesan hover CSS sekaligus. Sebagai contoh, anda boleh mengubah ketinggian, lebar, dan warna latar belakang elemen div apabila anda melayang ke atasnya. Berikut adalah contoh:

<code class="language-css">div:hover {
  height: 200px;
  width: 200px;
  background-color: red;
}</code>

Dalam contoh ini, apabila tetikus melayang di atas div, ketinggian, lebar, dan warna latar belakang div akan berubah.

Bolehkah saya membuat kesan peralihan menggunakan kesan hover CSS?

Ya, anda boleh menggunakan kesan hover CSS bersempena dengan harta peralihan untuk mewujudkan kesan peralihan yang lancar. Sebagai contoh, anda boleh membuat kesan peralihan yang secara beransur -ansur mengubah ketinggian elemen div dalam 2 saat manakala tetikus melayang di atas elemen Div. Berikut adalah contoh:

<code class="language-css">div {
  transition: height 2s;
}

div:hover {
  height: 200px;
}</code>

Dalam contoh ini, apabila tetikus melayang di bahagian div, ketinggian div akan secara beransur -ansur berubah menjadi 200px dalam 2 saat.

Sila ambil perhatian bahawa saya menggantikan semua pautan imej sebagai ruang letak kerana saya tidak dapat mengakses imej asal. Sila ganti pemegang tempat dengan pautan imej sebenar. Begitu juga, tempat -tempat di mana pautan diperlukan dalam artikel juga digantikan oleh ruang letak, sila gantikannya mengikut keadaan sebenar.

Atas ialah kandungan terperinci Atoz CSS Petua Pantas: Menggunakan Hover dan Ketinggian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!