For Android device For iOS device
២៣
មករា

គន្លឹះ​ខ្លះ​ៗ និយាយអំពីរបៀបនៃការ Hover ដើម្បី​ឲ្យ​ចេញអក្សរដោយ​ប្រើ​ប្រាស់ CSS និង HTML

រៀបរៀងដោយ កញ្ញា អេង រតន:

សួស្តីអ្នក​ទាំងអស់​គ្នា ថ្ងៃ​នេះ​ខ្ញុំ​ចង់​បង្ហាញ​អ្នក​ទាំងអស់​គ្នា​អំពីគន្លឹះមួយចំនួននៅ​ក្នុង​ HTML & CSS ​ដែល​អាច​ឲ្យ​យើងដឹងអំពីរបៀបនៃការ​ Hover  ដើម្បី​ឲ្យ​វាចេញអក្សរ​នៅលើ​រូបភាព​ហើយនឹងធ្វើ​ឲ្យ​រូបភាព​កាន់តែច្បាស់ជាងមុ​ន ។   ដើម្បី​កុំ​ឲ្យ​ខាតពេលយូរតោះយើងទៅមើល​លទ្ធផល​និងឧទាហរណ៍ជាកូដដូច​ខាងក្រោម​៖

 ​លទ្ធផល​កូដ

ការពន្យល់​លទ្ធផល​កូដ

Refresh ​ទៅលើ​ Browser ​រូបភាព​ស្រអាប់នឹង​គ្មាន​អក្សរ ។

ពន្យល់កូដ HTML

-  នៅបន្ទាត់ទី៧ គេ​ប្រើ​ tag link ដើម្បី​ត​ភ្ជាប់​ជាមួយ File HTML ជាមួយ File CSS

-  នៅបន្ទាត់ទី១០​ គេ​ប្រើ​ class មួយ​ឈ្មោះ​ថា image ដើម្បី​ក្ដោប​ទៅលើ​ h1 ​រូបភាព​ ហើយនិង class មាន​ឈ្មោះ​ថា bg

-  បន្ទាត់ទី១១ ដាក់​ចំណងជើង​ឲ្យ​រូបភាព​

-  បន្ទាត់ទី១២ គេ​ប្រើ​ tag image ដើម្បី​បង្ហាញ​រូបភាព​នៅលើ​ Browse

-  នៅបន្ទាត់ទី១៣ គេ​ប្រើ​ class មាន​ឈ្មោះ​ថា bg ដើម្បី​ឲ្យ​រូបភាព​រាងងងឹត

-  នៅបន្ទាត់ទី១៤ ដាក់អក្សរ​នៅពេល​ដែល​ hover លើ​រូបភាព​ឲ្យ​វាចេញអក្សរ

ពន្យល់កូដ CSS

-  នៅបន្ទាត់ទី៥​ ដល់ទី៨ ដាក់ពណ៌នៅផ្ទៃខាងក្រោយ

-  នៅបន្ទាត់ទី៩ ដល់ទី១៣​ ដាក់​ឈ្មោះ​ ដាក់ពណ៌​ឲ្យ​អក្សរ​នឹងដាក់អក្សរ​ឲ្យ​នៅកណ្ដាលនៃ​រូបភាព​

- នៅបន្ទាត់ទី១៤ ដល់ទី១៨ ដាក់​ទំហំ​ហើយនិងក្ដោប​ទៅលើ​ h1 ​រូបភាព​ ហើយនិង class មាន​ឈ្មោះ​ថា bg ​ឲ្យ​វានៅកណ្ដាលនៃ Browser និង​កម្ពស់​ពីលើមកក្រោម ៥០px

-  នៅបន្ទាត់ទី១៩​ ដល់ទី២៣ ដាក់​ទំហំ​រូបភាព​និង​កំណត់​ឲ្យ​រូបភាព​នៅជាមួយ​គ្នា​ធៀបទៅនិង class ​ដែល​មាន​ឈ្មោះ​ថា bg

-  នៅបន្ទាត់ទី២៤ ដល់ទី៣០ ដាក់​ទំហំ និង​ ពណ៌​ឲ្យ​ Background ​នៅលើ​រូបភាព​ហើយនឹងដាក់​តម្លៃ​ឲ្យ​ពណ៌នៃ Background Smooth រយ:ពេល .២​វិនាទី​

-  នៅបន្ទាត់ទី៣១ដល់ទី៣៧​ ដាក់​ឈ្មោះ​ ​ទំហំ​ ហើយនឹងពណ៌អក្សរ​ឲ្យ​នៅកណ្ដាលនៃ​រូបភាព​ហើយនឹងបិទអក្សរមិន​ឲ្យ​វាឃើញ​នៅលើ​រូបភាព​រហូត​ដល់ពេល Hover លើ​រូបភាព​ទើបមើលអក្សរឃើញ

-  នៅបន្ទាត់ទី៣៨ដល់ទី៤៣ ​នៅពេល​យើង Hover លើ​រូបភាព​និងពណ៌​រូបភាព​ច្បាស់​ជាងមុន​

- នៅបន្ទាត់ទី៤៤ដល់ទី៤៦ ​នៅពេល​យើង Hover លើ​រូបភាព​វានឹង​បង្ហាញ​អក្សរ​នៅលើ​រូបភាព ៕

→ ​សម្រាប់ Link Download កម្មវិធី ANTLearner សម្រាប់ Android & Windows http://www.antclasses.com/help/page/download.html

→ ​សម្រាប់ Link Download កម្មវិធី​ផ្សេងទៀត​សម្រាប់ iOS & Android & Windows http://www.antclasses.com/help/page/application.html

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា