இந்த கையேட்டின் நோக்கம் CSS ஐப் பயன்படுத்தி படமெடுப்பதில் படத்தை எவ்வாறு மாற்றுவது என்பதை ஆராய்வதாகும். எனவே, தொடங்குவோம்!
அது என்ன: CSS இல் மிதவையா?
:ஹோவர் என்பது போலி-வகுப்பின் ஒரு உறுப்பு ஆகும், இது ஒரு சுட்டி அதைத் தூண்டும் போது HTML உறுப்புகளின் நிலையை மாற்றப் பயன்படுகிறது. இந்த CSS தேர்வுக்குழு முதன்மையாக பாணி அல்லது உறுப்புகளைத் தேர்ந்தெடுக்கப் பயன்படுத்தப்படுகிறது. இருப்பினும், இணைப்புகளுக்கு இதைப் பயன்படுத்த முடியாது.
தொடரியல்
:ஹோவர் என்பதன் தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது:
உறுப்பு : மிதவை {
CSS குறியீடு. . .
}
இங்கே,' உறுப்பு ” என்பது நீங்கள் மிதவை விளைவைப் பயன்படுத்த விரும்பும் உறுப்பைக் குறிக்கிறது.
இப்போது, CSS ஐப் பயன்படுத்தி படமெடுப்பதில் படத்தை மாற்றுவதற்கான நடைமுறை உதாரணத்திற்குச் செல்வோம்.
எடுத்துக்காட்டு: CSS ஐப் பயன்படுத்தி ஹோவரில் படத்தை மாற்றுவது எப்படி?
முதலில் படப்பிடிப்பில் படத்தை மாற்ற, HTML பிரிவில் இரண்டு படங்களைச் சேர்க்கவும். முதல் படம் செயலில் உள்ள நிலைக்கானது, அடுத்தது மிதவை நிலைக்கானது.
படி 1: படங்களைச் சேர்க்கவும்
குறிப்பிட்ட நோக்கத்திற்காக, நாங்கள் இரண்டு படங்களைச் சேர்ப்போம், ' படம்1 'மற்றும்' படம்2 ”, மற்றும் வகுப்பின் பெயரை இரண்டாவது படத்திற்கு “ என ஒதுக்கவும் மிதவை_img ”.
HTML
< உடல் >< div வர்க்கம் = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' வர்க்கம் = 'ஹோவர்_இம்ஜி' >
< / div >
< / உடல் >
படி 2: உடை படங்கள்
இப்போது, இரண்டு படங்களின் நிலையை அமைக்க CSS க்கு செல்லவும் ' நிலை ”சொத்து. அதன் நிலையை நாங்கள் அமைப்போம் ' அறுதி ” அதை முற்றிலும் அதன் நெருங்கிய பெற்றோரின் குறிப்புடன் நிலைநிறுத்த.
CSS
.img {நிலை : அறுதி ;
}
இது பின்வரும் முடிவைக் காண்பிக்கும்:
அடுத்த கட்டத்தில், இரண்டாவது படத்தை முதல் படத்திற்கு முன்னால் அமைப்போம். அவ்வாறு செய்ய, படத்தின் நிலையை '' என அமைப்போம். அறுதி ' மற்றும் மேல் மற்றும் இடது நிலையை அமைக்கவும் ' 0 ”. இந்தப் படத்தைப் பயன்படுத்துவது முதல் படத்தின் முன் வைக்கப்பட்டுள்ளது, ஆனால் இரண்டாவது படத்தை அதன் மீது சுட்டி வட்டமிடும்போது அதைக் காட்ட விரும்புகிறோம். எனவே, காட்சி மதிப்பை ' என அமைக்கவும் எதுவும் இல்லை ” விரும்பிய முடிவைக் காண்பிக்கும்:
.ஹவர்_இம்ஜி {நிலை : அறுதி ;
மேல் : 0 ;
விட்டு : 0 ;
காட்சி : எதுவும் இல்லை ;
}
கொடுக்கப்பட்ட குறியீட்டின் வெளியீடு பின்வருமாறு:
முதல் படத்திற்குப் பின்னால் இரண்டாவது படம் வெற்றிகரமாக மறைக்கப்பட்டுள்ளது.
இப்போது, அடுத்த படிக்குச் செல்லவும்.
படி 3: ஹோவரில் படத்தை மாற்றவும்
அடுத்து, பயன்படுத்தவும் ' : மிதவை ” மற்றும் தேர்ந்தெடுக்கவும் .img 'தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு ஹோவர் பயன்படுத்தவும். பின்னர், இரண்டாவது படத்தின் வகுப்பின் பெயரை ஒதுக்கவும் ' .ஹவர்_இம்ஜி ”. அதன் பிறகு, அடைப்புக்குறிக்குள், காட்சி சொத்தின் மதிப்பை ' கோட்டில் ” இது உறுப்பை ஒரே வரியில் பொருத்தும்படி கட்டாயப்படுத்தும்:
.img : மிதவை .ஹவர்_இம்ஜி {காட்சி : கோட்டில் ;
}
பயனர் வட்டமிடும்போது படம் மாறுகிறது என்பதை நிரூபிக்கும் முடிவு இங்கே:
மேலே கொடுக்கப்பட்ட வெளியீடு, CSS ஐப் பயன்படுத்தி ஹோவரில் படத்தை வெற்றிகரமாக மாற்றியுள்ளோம் என்பதைக் குறிக்கிறது.
முடிவுரை
'' ஐப் பயன்படுத்தி படத்தை மிதவையில் மாற்றலாம் : மிதவை ” போலி வர்க்க உறுப்பு. அவ்வாறு செய்ய, HTML கோப்பில் தேவையான படங்களைச் சேர்த்து, அவற்றை CSS ஐப் பயன்படுத்தி அதே நிலையில் அமைத்து, அவற்றில் :கோவர் தேர்வியைப் பயன்படுத்தவும். இதன் விளைவாக, அதன் மேல் வட்டமிடும்போது முதல் படம் மாறும். இந்த கட்டுரையில், ஒரு நடைமுறை உதாரணத்துடன்:ஹவர் ஐப் பயன்படுத்தி படமெடுக்கும் படத்தை எவ்வாறு மாற்றுவது என்பதை விளக்கியுள்ளோம்.