இந்தக் கட்டுரை டெயில்விண்ட் CSS ஐப் பயன்படுத்தி, தெரிவுநிலை பண்புகளுடன் ஹோவர் மற்றும் பிற மாநிலங்களைப் பயன்படுத்துவதற்கான செயல்படுத்தல் செயல்முறையைக் கையாள்கிறது.
டெயில்விண்டில் பார்வைத்திறன் பயன்பாட்டுடன் ஹோவர் மற்றும் பிற மாநிலங்களுக்கு எவ்வாறு விண்ணப்பிப்பது?
பயனர் தொடர்புகளில் தெரிவுநிலை மாற்றங்களைச் செய்ய, படல் மற்றும் பிற நிலைகளில் தெரிவுநிலை பயன்பாடு பயன்படுத்தப்படலாம். தெரிவுநிலை பயன்பாட்டின் கீழ் மூன்று வகுப்புகள் உள்ளன, அதாவது ' தெரியும் ”,” கண்ணுக்கு தெரியாத ', மற்றும் ' சரிவு ”. சிறந்த புரிதலுக்காக, கீழே உள்ள எடுத்துக்காட்டுகளில் மிதவை நிலைகளுடன் சில தெரிவுநிலை வகுப்புகளை ஒருங்கிணைப்போம்.
எடுத்துக்காட்டு 1: 'கண்ணுக்கு தெரியாத' வகுப்பில் ஹோவர் நிலையைப் பயன்படுத்துதல்
இந்த வழக்கில், பயனரின் கர்சர் உறுப்பு மீது வட்டமிடும்போது தேர்ந்தெடுக்கப்பட்ட உறுப்பு மறைக்கப்படும், குறியீடு கீழே காட்டப்பட்டுள்ளது:
< உடல் >
< div வர்க்கம் = 'கிரிட் கிரிட்-கோல்ஸ்-3 இடைவெளி-4 என்-4 எம்எக்ஸ்-4' >
< div வர்க்கம் = 'bg-blue-500 p-3 வட்டமான உரை-மையம்' > 01 < / div >
< div வர்க்கம் = 'bg-blue-500 p-3 hover:invisible rounded text-center' > 02 < / div >
< div வர்க்கம் = 'bg-blue-500 p-3 வட்டமான உரை-மையம்' > 03 < / div >
< / div >
< / உடல் >
மேலே உள்ள குறியீட்டின் விளக்கம்:
- முதலாவதாக, ஒவ்வொரு நெடுவரிசைக்கும் 'இன் விளிம்புகளுக்கும் இடையில் ஒரு இடைவெளியைக் கொண்ட மூன்று-நெடுவரிசை கட்டம் அமைப்பை உருவாக்கும் பெற்றோர் பிரிவு உருவாக்கப்பட்டது. 4px ”. டெயில்விண்ட் CSS ஐப் பயன்படுத்துதல் ' கட்டம் ”,” கட்டம்-கோல்கள்-3 ”,” இடைவெளி ”,” என் ', மற்றும் ' mx ”வகுப்புகள் முறையே.
- அடுத்து மூன்று பிள்ளைகள்” div ” கூறுகள் உருவாக்கப்பட்டு, அடிப்படை ஸ்டைலிங் பயன்படுத்தப்படுகிறது.
- பின்னர், ' மிதவை CSS இல் 'நிலை அல்லது தேர்வாளர் இரண்டாவது 'div' மற்றும் ' கண்ணுக்கு தெரியாத 'பெருங்குடலால் பிரிக்கப்பட்ட அதற்கு ஒதுக்கப்பட்டுள்ளது' : ” அடையாளம். மவுஸ் அதன் மேல் வட்டமிடப்படும் போது இது இரண்டாவது பிரிவை கண்ணுக்கு தெரியாததாக ஆக்குகிறது.
செயல்படுத்தும் கட்டத்திற்குப் பிறகு வலைப்பக்கத்தின் முன்னோட்டம்:
மேலே உள்ள gif, மவுஸ் ஹோவரில் இரண்டாவது பிரிவு கண்ணுக்குத் தெரியாததாக மாறுவதைக் காட்டுகிறது.
எடுத்துக்காட்டு 2: 'கண்ணுக்கு தெரியாத' வகுப்பில் செயலில் உள்ள நிலையைப் பயன்படுத்துதல்
பயனர் ஒரு குறிப்பிட்ட உறுப்பைத் தேர்ந்தெடுத்து வெளியேறாதபோது 'செயலில்' நிலை பாணிகளைப் பயன்படுத்துகிறது. ஒரு பயனர் புலத்தின் உள்ளே தரவை உள்ளிடத் தொடங்கும் போது உரை பெட்டிகளைப் போலவே, இந்த நேரத்தில் புலம் செயலில் உள்ளது. செயலில் உள்ள நிலை மற்றும் 'கண்ணுக்கு தெரியாத' வகுப்பில் அது எவ்வாறு செயல்படுகிறது என்பதைப் பற்றிய தெளிவான புரிதலைப் பெற, கீழே உள்ள குறியீட்டைப் பார்வையிடவும்:
< உடல் >< div வர்க்கம் = 'கிரிட் கிரிட்-கோல்ஸ்-3 இடைவெளி-4 என்-4 எம்எக்ஸ்-4' >
< div வர்க்கம் = 'bg-blue-500 p-3 வட்டமான உரை-மையம்' >01< / div >
< div வர்க்கம் = 'bg-blue-500 p-3 செயலில்: கண்ணுக்கு தெரியாத வட்டமான உரை-மையம்' >02< / div >
< div வர்க்கம் = 'bg-blue-500 p-3 வட்டமான உரை-மையம்' >03< / div >
< / div >
< / உடல் >
மேலே உள்ள குறியீட்டில், ' கண்ணுக்கு தெரியாத ''க்கு ஒதுக்கப்பட்டுள்ளது செயலில் 'இரண்டாவது மாநிலம்' div 'உறுப்பு இரண்டாவது DIV உறுப்பு தேர்ந்தெடுக்கப்படும் போது அதை மறைக்க வேண்டும்.
செயல்படுத்திய பிறகு, வலைப்பக்கத்தின் முன்னோட்டம் இப்படித் தோன்றும்:
மேலே உள்ள வெளியீடு இரண்டாவது 'டிவ்' தேர்ந்தெடுக்கப்பட்டால் உறுப்பு கண்ணுக்கு தெரியாததாகிறது.
முடிவுரை
தேர்ந்தெடுக்கப்பட்ட உறுப்புகளுக்குத் தெரிவுநிலைப் பண்புகளை மாற்றியமைக்க, தெரிவுநிலைப் பயன்பாடினால் வழங்கப்படும் வகுப்புகளுடன் மிதவை மற்றும் செயலில் அல்லது கவனம் போன்ற பிற நிலைகளைப் பயன்படுத்தலாம். மவுஸ் ஹோவரில் உள்ள உறுப்புகளின் தெரிவுநிலையை மாற்ற, '' போன்ற நிறத்தால் பிரிக்கப்பட்ட தெரிவுநிலை வகுப்புகளுடன் ஹோவர் வகுப்பு பயன்படுத்தப்படுகிறது. மிதவை:தெரியும் ' அல்லது ' மிதவை:கண்ணுக்கு தெரியாத ”. இந்த வலைப்பதிவு தெரிவுநிலை பயன்பாட்டுடன் ஹோவர் நிலைகளைப் பயன்படுத்துவதற்கான செயல்முறையை விளக்கியுள்ளது.