எடுத்துக்காட்டுகளுடன் CSS இல் ஹோவர் செயல்படுத்துவது எப்படி

எடுத்துக்காட்டுகளுடன் CSS இல் ஹோவரை எவ்வாறு செயல்படுத்துவது என்பது பற்றிய விரிவான மற்றும் விரிவான அறிவை இந்த கட்டுரை உங்களுக்கு வழங்கும்.

அடுக்கை நடைத்தாள்கள் (CSS) பயன்படுத்தி வடிவமைக்கப்பட்டுள்ளன அல்லது எக்ஸ்எம்எல் (எக்ஸ்எச்எம்எல், எஸ்விஜி உட்பட) வடிவம். இது பலவிதமான வடிவமைப்பு முறைகள் மூலம் கூறுகளை விவரிக்க முதன்மையாகப் பயன்படுத்தப்படும் ஒரு நடை தாள் மொழி. முறைகளில் ஒன்று மிதப்பது மற்றும் இந்த கட்டுரையில், CSS இல் ஹோவரை பின்வரும் முறையில் புரிந்துகொள்வோம்:

CSS இல் ஹோவர் என்றால் என்ன?

சிஎஸ்எஸ் ஹோவர் என்பது ஒரு தேர்வாளர் கூறு ஆகும், இது மவுஸ் சுட்டிக்காட்டி அவற்றின் மீது வட்டமிடும்போது வெவ்வேறு கூறுகளை பாணிக்கு பயன்படுத்தப்படுகிறது. அவை கிட்டத்தட்ட ஒவ்வொரு HTML உறுப்புகளிலும் பயன்படுத்தப்படலாம். CSS இல் உள்ள மிதவை அம்சம் வலைப்பக்க வடிவமைப்பில் கணிசமான முக்கியத்துவத்தைக் கொண்டுள்ளது.



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: மிதவை {பின்னணி-வண்ணம்: சிவப்பு}

ரெட் ஹோவர்

ரெட் ஹோவர்

இணைப்புகள்:

ஹோவர் டெஸ்ட் சிவப்பு:

கூகிள் காம்

குறிப்பு: வணக்கம்

மேலே உள்ள குறியீடு தனிப்பயனாக்குகிறது

,

மற்றும் உறுப்பு மற்றும் ஒரு பொதுவான மிதவை செயல்பாட்டில் அவற்றை ஒருங்கிணைக்கிறது. இந்த குறியீடு மவுஸ் சுட்டிக்காட்டி அவற்றின் மீது வட்டமிடும்போது உரை நிறத்தை சிவப்பு நிறமாக மாற்ற வடிவமைக்கப்பட்டுள்ளது. H1 மற்றும் h2 கூறு முறையே “CSS: ஹோவர் டெஸ்ட் கோட்” மற்றும் “ஹோவர் ரெட்” ஆகியவற்றைக் காட்டுகிறது. பத்தி உறுப்பு: ஹோவர் டெஸ்ட் சிவப்பு மற்றும் நங்கூரம் குறிச்சொல்: சுட்டி சுட்டிக்காட்டி அவற்றின் மீது வட்டமிடும்போது google.com சிவப்பு நிறத்தில் சிறப்பிக்கப்படுகிறது.

ஜாவா தேதி சரம் இன்றுவரை

படங்களில் ஹோவர் ஒளிபுகாநிலையை உருவாக்குதல்

.pic {width: 1900px height: 1900px ஒளிபுகா: 1 வடிகட்டி: ஆல்பா (ஒளிபுகா = 100) பின்னணி: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) மறுபடியும் மறுபடியும்} .pic: மிதவை {ஒளிபுகாநிலை: 0.2 வடிகட்டி: ஆல்பா (ஒளிபுகாநிலை = 30)}

மேலே உள்ள CSS நிரல் ஒரு படத்தின் ஒளிபுகாநிலையை மாற்றியமைப்பதைக் காட்டுகிறது. படத்தின் அசல் ஒளிபுகாநிலை ஒன்று இருப்பினும், ஒளிபுகா ஹோவர் வடிப்பானைப் பயன்படுத்துவது 0.2 ஆக மாற்றப்பட்டுள்ளது. இந்த குறியீடு ஹோவர் உறுப்பைப் பயன்படுத்துவதன் மூலம் ஒரு படம் மற்றும் / அல்லது உரையின் ஒளிபுகாநிலையை மாற்ற முடியும் என்பதைக் காட்டுகிறது.

படங்களில் உரை மேலடுக்கை உருவாக்குதல்

.pic {அகலம்: 4000px உயரம்: 2170px பின்னணி: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) மறுபடியும் மறுபடியும் இல்லை}. உரை {அகலம்: 3400px உயரம்: 2170px பின்னணி: #FFF ஒளிபுகா: 0} .pic: hover .text {ஒளிபுகாநிலை: 0.6 உரை-சீரமை: வண்ணத்தை நியாயப்படுத்து: # 000000 எழுத்துரு-அளவு: 20px எழுத்துரு-எடை: 700 எழுத்துரு-குடும்பம்: 'டைம்ஸ் நியூ ரோமன்', டைம்ஸ், செரிஃப் திணிப்பு: 30px} ஆரஞ்சு ஒரு இழை பணக்கார பழம். ஒரு ஆரஞ்சு நிறத்தில் உள்ள ஆன்டி-ஆக்ஸிடன்ட்கள் செரிமானத்திற்கு உதவுகின்றன, சருமத்தை பளபளக்கச் செய்யலாம் மற்றும் வயதான எதிர்ப்பு உறுப்புகளாக செயல்படுகின்றன.

CSS ஹோவரில் உரை அடுக்கு என்பது படத்தின் விளக்க உரையை படத்திற்குள் உட்பொதிப்பதற்கான ஒரு திறமையான கருவியாகும். வரையறுக்கப்பட்ட வலை-வடிவமைப்பு இடத்தில் செயலற்ற இடத்தை எடுத்துக் கொள்ளாமல் படத்தின் சுருக்கமான கண்ணோட்டத்தை வழங்க இந்த கருவி உதவுகிறது. இந்த குறியீட்டில், பின்னணி படம் ஒரு விளக்க உரையுடன் உட்பொதிக்கப்பட்டுள்ளது, இது சுட்டி சுட்டிக்காட்டி உரையின் மேல் வட்டமிடும் போது காண்பிக்கப்படும்.



இது CSS இல் மிதக்கும் அனைத்து முக்கிய அம்சங்களையும் முடிக்கிறது மற்றும் வலை வளர்ச்சியில் அதன் பயன்பாட்டினை எடுத்துக்காட்டுகிறது. இது எங்கள் வலைப்பக்கங்களில் கொண்டு வரக்கூடிய பல சிறப்பு விளைவுகள் உள்ளன. அனிமேஷன், பின்னணி படங்கள், ஹைப்பர்லிங்க்ஸ் போன்ற பிற CSS பண்புகளுடன் ஹோவர் தேர்வாளரின் வெவ்வேறு சேர்க்கைகளை நாம் எப்போதும் முயற்சி செய்யலாம் மற்றும் எங்கள் சில எடுத்துக்காட்டுகளில் பார்த்தபடி அதன் திறனை ஆராயலாம். இறுதியாக, வலைப்பக்கங்களை வடிவமைப்பதற்கும் மாற்றுவதற்கும் CSS மிகவும் சக்திவாய்ந்த வழிகளில் ஒன்றாகும், எனவே டைனமிக் வலைப்பக்கங்களை உருவாக்குவதற்காக வலை உருவாக்குநர்கள் இந்த திறனைப் பெறுவது உடனடி.

எங்கள் பாருங்கள் இது பயிற்றுவிப்பாளர் தலைமையிலான நேரடி பயிற்சி மற்றும் நிஜ வாழ்க்கை திட்ட அனுபவத்துடன் வருகிறது. இந்த பயிற்சி பின்-முனை மற்றும் முன்-வலை வலை தொழில்நுட்பங்களுடன் பணிபுரியும் திறன்களில் நீங்கள் தேர்ச்சி பெறுகிறது. வலை அபிவிருத்தி, jQuery, கோணல், நோட்ஜெஸ், எக்ஸ்பிரஸ்ஜேஎஸ் மற்றும் மோங்கோடிபி பற்றிய பயிற்சி இதில் அடங்கும்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'ஹோவர் இன் CSS' வலைப்பதிவின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.