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 ”. ఈ చిత్రాన్ని ఉపయోగించడం మొదటి చిత్రం ముందు ఉంచబడుతుంది, కానీ మౌస్ దానిపై హోవర్ చేసినప్పుడు మేము రెండవ చిత్రాన్ని ప్రదర్శించాలనుకుంటున్నాము. కాబట్టి, ప్రదర్శన విలువను ''గా సెట్ చేయండి ఏదీ లేదు ” కోరుకున్న ఫలితాన్ని చూపుతుంది:
.హోవర్_img {స్థానం : సంపూర్ణ ;
టాప్ : 0 ;
వదిలేశారు : 0 ;
ప్రదర్శన : ఏదీ లేదు ;
}
ఇచ్చిన కోడ్ అవుట్‌పుట్ క్రింది విధంగా ఉంది:
మొదటి చిత్రం వెనుక రెండవ చిత్రం విజయవంతంగా దాచబడింది.
ఇప్పుడు, తదుపరి దశకు వెళ్లండి.
దశ 3: హోవర్‌లో చిత్రాన్ని మార్చండి
తరువాత, 'ని ఉపయోగించండి : హోవర్ 'మరియు' ఎంచుకోండి .img ” ఎంచుకున్న ఎలిమెంట్‌కు హోవర్‌ని వర్తింపజేయడానికి. ఆపై, రెండవ చిత్రం యొక్క తరగతి పేరును కేటాయించండి ' .హోవర్_img ”. ఆ తర్వాత, కుండలీకరణాల లోపల, ప్రదర్శన ఆస్తి విలువను ఇలా సెట్ చేయండి లైన్ లో ” ఇది మూలకాన్ని ఒకే లైన్‌లో సరిపోయేలా బలవంతం చేస్తుంది:
.img : హోవర్ .హోవర్_img {ప్రదర్శన : లైన్ లో ;
}
వినియోగదారు దానిపై హోవర్ చేసినప్పుడు చిత్రం మార్చబడిందని ప్రదర్శించే ఫలితం ఇక్కడ ఉంది:
పైన ఇచ్చిన అవుట్‌పుట్ మేము CSSని ఉపయోగించి హోవర్‌లో ఉన్న చిత్రాన్ని విజయవంతంగా మార్చినట్లు సూచిస్తుంది.
ముగింపు
చిత్రం 'ని ఉపయోగించి హోవర్‌లో మార్చవచ్చు : హోవర్ ”సూడో-క్లాస్ ఎలిమెంట్. అలా చేయడానికి, HTML ఫైల్‌లో అవసరమైన చిత్రాలను జోడించి, CSSని ఉపయోగించి వాటిని అదే స్థానంలో సెట్ చేయండి మరియు వాటిపై :హోవర్ సెలెక్టర్‌ను వర్తింపజేయండి. ఫలితంగా, మొదటి చిత్రం దానిపై హోవర్ చేసినప్పుడు మారుతుంది. ఈ ఆర్టికల్‌లో, ప్రాక్టికల్ ఉదాహరణతో :హోవర్‌ని ఉపయోగించి హోవర్‌లో చిత్రాన్ని ఎలా మార్చాలో మేము వివరించాము.