அடுக்கை நடைத்தாள்கள் (CSS) பயன்படுத்தி வடிவமைக்கப்பட்டுள்ளன அல்லது எக்ஸ்எம்எல் (எக்ஸ்எச்எம்எல், எஸ்விஜி உட்பட) வடிவம். இது பலவிதமான வடிவமைப்பு முறைகள் மூலம் கூறுகளை விவரிக்க முதன்மையாகப் பயன்படுத்தப்படும் ஒரு நடை தாள் மொழி. முறைகளில் ஒன்று மிதப்பது மற்றும் இந்த கட்டுரையில், CSS இல் ஹோவரை பின்வரும் முறையில் புரிந்துகொள்வோம்:
- CSS இல் ஹோவர் என்றால் என்ன?
- ஹோவர் எங்கே பயன்படுத்தப்படுகிறது?
- ஹோவர் என்ன செய்கிறார்?
- பொருந்தக்கூடிய தன்மை
- இது எப்படி வேலை செய்கிறது?
- பின்னணி வண்ண மாற்றத்தை “சிவப்பு” க்கு நகர்த்தவும்
- படங்களில் ஹோவர் ஒளிபுகாநிலையை உருவாக்குதல்
- படங்களில் உரை மேலடுக்கை உருவாக்குதல்
CSS இல் ஹோவர் என்றால் என்ன?
சிஎஸ்எஸ் ஹோவர் என்பது ஒரு தேர்வாளர் கூறு ஆகும், இது மவுஸ் சுட்டிக்காட்டி அவற்றின் மீது வட்டமிடும்போது வெவ்வேறு கூறுகளை பாணிக்கு பயன்படுத்தப்படுகிறது. அவை கிட்டத்தட்ட ஒவ்வொரு HTML உறுப்புகளிலும் பயன்படுத்தப்படலாம். CSS இல் உள்ள மிதவை அம்சம் வலைப்பக்க வடிவமைப்பில் கணிசமான முக்கியத்துவத்தைக் கொண்டுள்ளது.
சுருக்கமான மற்றும் பயனுள்ள வலை-வடிவமைப்பு திட்டத்தில் பயனர் விருப்பத்திற்கு ஏற்ப வலைப்பக்கங்களை சிறப்பம்சமாக, குறியாக்க மற்றும் தனிப்பயனாக்க முடியும்.
ஹோவர் எங்கே பயன்படுத்தப்படுகிறது?
ஹோவர் அம்சத்தின் நம்பகத்தன்மைக்கு மிகவும் பொதுவான எடுத்துக்காட்டுகள் பிளிப்கார்ட் மற்றும் அமேசான் போன்ற முக்கிய ஷாப்பிங் வலைத்தளங்களில் முன்னிலைப்படுத்தப்படலாம். இந்த ஈ-காமர்ஸ் வலைத்தளங்களில் பயனர்கள் எந்தவொரு தயாரிப்பிலும் வட்டமிடும் போது, வாடிக்கையாளருக்கு அவர்கள் தேர்ந்தெடுத்த தயாரிப்புகளின் சிறந்த பார்வையை வழங்குவதற்காக தானியங்கு ஜூம் ஹோவர் செயல்பாட்டைச் செய்ய தயாரிப்பு திட்டமிடப்பட்டுள்ளது. இந்த நிரலாக்கத்தின் மூலம், வலைப்பக்கமானது முழு தயாரிப்பு வரம்பின் சுருக்கமான காட்சியைக் காண்பிப்பதற்காக வடிவமைக்கப்பட்டுள்ளது, இது ஒரு வலைப்பக்க வடிவமைப்பில் ஆர்வமுள்ள தயாரிப்பு பற்றிய விரிவான பார்வையுடன் இருக்கும்.
ஹோவர் என்ன செய்கிறார்?
ஹோவர் என்பது பல செயல்பாட்டு நிரலாக்க கருவியாகும், இதன் மூலம் பயனர் இலக்கு உறுப்பை முடிவற்ற எண்ணிக்கையிலான வடிவமைப்பு அளவுகோல்களுடன் தனிப்பயனாக்க முடியும். ஹோவர் அம்சத்தின் செயல்பாட்டு அறிவின் சில நிகழ்வுகள் பின்வருமாறு:
- பின்னணி / எழுத்துரு நிறத்தை மாற்றுதல்
- ஹோவரில் காண்பிக்கப்படும் மறைக்கப்பட்ட உரையை உட்பொதித்தல்
- படங்களில் ரோல்ஓவர் விளைவுகளை உருவாக்கவும்
- உரை / படங்களில் தானியங்கு பெரிதாக்குதல்
- பட ஒளிபுகாநிலையை மாற்றவும்
- உரை உட்பொதித்தல்
- பட இடமாற்று
- திவ். ஹோவர்
- பல பிற CSS ஹோவர் வடிவமைப்பு செயல்பாடுகள்.
ஹோவர் விளைவு அடிப்படையில் ஒரு உறுப்புக்கான சொத்து மதிப்பை மாற்றியமைக்கிறது. ஒரு வலைப்பக்க வடிவமைப்பில் CSS ஹோவர் கூறுகளின் உட்பொதித்தல் ஒரு வழக்கமான வலைப்பக்கத்தை ஒரு ஊடாடும், வலுவான மற்றும் மிகவும் செயல்பாட்டு வலைப்பக்கமாக மாற்றுகிறது. இந்த வலைப்பக்க வடிவமைப்புகள் பயனர் நட்பு மற்றும் விரிவானவை. ஹோவர் வடிவமைக்கப்பட்ட வலைப்பக்கங்களில் அதிக நுகர்வோர் முறையீடு உள்ளது, மேலும் அவை வாடிக்கையாளர்களின் அறிவிப்பை கவர்ந்திழுக்கின்றன.
CSS இல் ஹோவரின் பொருந்தக்கூடிய தன்மை
ஹோவர் அம்சம் அனைத்து முக்கிய இணைய உலாவிகளுடனும் இணக்கமானது. இருப்பினும், தொடு சாதனங்களில் இந்த உறுப்பை செயல்படுத்துவது இன்னும் ஒரு சவாலான பணியாகும். CSS இல் உள்ள மிதவை ஹோவர் செயல்பாடுகளை ஆதரிக்காத சாதனங்களில் உள்ளடக்க அணுகலை செயல்படுத்துகிறது. ஆதரிக்காத சாதனத்தில் செயல்படுத்தப்பட்ட மிதவை செயல்பாடு சாதனத்தில் சிக்கிக்கொள்ளும் என்று கண்டறியப்பட்டுள்ளது.
html மற்றும் xml க்கு என்ன வித்தியாசம்?
இதன் விளைவாக, வடிவமைப்பு உள்ளடக்கத்தின் மூலம் முக்கியமான உள்ளடக்கத்தின் முக்கிய காட்சி தடுக்கப்படுகிறது. ஒருபுறம், CSS திட்டத்தில் உள்ள மிதவை உறுப்பு வலைப்பக்கங்களுக்கு திறமையான தனிப்பயனாக்கத்தின் சிறந்த அளவை பங்களிக்கிறது, மொபைல் சாதனங்களில் அதன் செயல்பாடு மிகவும் செயலற்றதாக இருக்கிறது. தகவல் தொழில்நுட்ப உலகம் கணிசமாக மொபைல் வளர்ந்து வரும் சூழ்நிலைகளுக்கு இணங்க, தொழில்நுட்ப முன்னேற்றங்களுடன் ஹோவர் அம்ச அபாயங்கள் வழக்கற்றுப் போகின்றன. எனவே, தொடுதல் மற்றும் மொபைல் சாதனங்களுடன் செயல்படும் ஒரு சிறிய உட்பொதிக்கப்பட்ட அம்சத்தை உருவாக்குவதற்கான தேவை மிகவும் முக்கியமானது.
CSS இல் ஹோவர் எவ்வாறு செயல்படுகிறது?
செயலில் உள்ள போலி வகுப்பு பாணி CSS ஹோவர் வடிவமைப்பில் ஆதிக்கம் செலுத்துகிறது, மேலும் இது இந்த போலி-வகுப்பைத் தொடர்ந்து வரும் எந்தவொரு / அனைத்து அடுத்தடுத்த இணைப்பையும் மீறுகிறது. உதாரணமாக போலி வகுப்பில் “: இணைப்பு: பார்வையிட்டது, அல்லது: செயலில்: ஹோவர் விதி பின் வைக்கப்பட வேண்டும்: இணைப்பு மற்றும்: பார்வையிட்டது ஆனால் இதற்கு முன்: பொருத்தமான செயலில்: மிதவை ஸ்டைலிங். எல்விஹெச்ஏ-ஆர்டர் :: இணைப்பு ,: மிதவை ,: பார்வையிட்டது, மற்றும்: செயலில் சரியானவை: ஹோவர் வடிவமைத்தல் பாணிக்கான குறிப்பாக பயன்படுத்தப்படுகிறது.
div {background-color: green padding: 18px display: none} span: hover + div {display: block}ஹோவர் டெஸ்ட்!ஹோவரில் மறைக்கப்பட்ட குறியீடு காட்டுகிறது
மேலே உள்ள குறியீட்டில், ஸ்பான்: ஹோவர் + டிவ் உறுப்பு ஆகியவற்றைப் பயன்படுத்தி ஹோவர் மற்றும் டிவ் உறுப்பை ஒன்றிணைக்க ஸ்பான் உறுப்பு மாற்றப்பட்டுள்ளது. முதன்மை இறங்கும் வலைப்பக்கத்தில் காண்பிக்கப்படும் இடைவெளி உறுப்பு “ஹோவர் சோதனை!” என்ற உரையைக் காண்பிக்கும். ஸ்பான் உறுப்பு மீது மேலும் வட்டமிடுவதால், 'மறைக்கப்பட்ட குறியீடு ஹோவர் மீது காண்பிக்கப்படுகிறது' என்ற div உறுப்பை வெளிப்படுத்துகிறது. இந்த உட்பொதித்தல் வடிவம் உரை மற்றும் படங்களில் செயல்படுகிறது.
பின்னணி வண்ண மாற்றத்தை “சிவப்பு” க்கு நகர்த்தவும்
p: மிதவை, h1: மிதவை, a: மிதவை {பின்னணி-வண்ணம்: சிவப்பு}ரெட் ஹோவர்
ரெட் ஹோவர்
இணைப்புகள்:
ஹோவர் டெஸ்ட் சிவப்பு:
கூகிள் காம்குறிப்பு: வணக்கம்
மேலே உள்ள குறியீடு தனிப்பயனாக்குகிறது
,