ఈ కథనం టెయిల్‌విండ్ CSSని ఉపయోగించి విజిబిలిటీ లక్షణాలతో హోవర్ మరియు ఇతర స్టేట్‌లను వర్తింపజేయడానికి అమలు ప్రక్రియతో వ్యవహరిస్తుంది.
టెయిల్‌విండ్‌లో విజిబిలిటీ యుటిలిటీతో హోవర్ మరియు ఇతర రాష్ట్రాలను ఎలా దరఖాస్తు చేయాలి?
వినియోగదారు పరస్పర చర్యపై విజిబిలిటీ మార్పులను చేయడానికి విజిబిలిటీ యుటిలిటీని హోవర్ మరియు ఇతర స్టేట్‌లలో ఉపయోగించవచ్చు. విజిబిలిటీ యుటిలిటీ క్రింద మూడు తరగతులు ఉన్నాయి అవి ' కనిపించే ',' అదృశ్య ', మరియు' కూలిపోతుంది ”. మెరుగైన అవగాహన కోసం క్రింది ఉదాహరణలలో హోవర్ స్టేట్‌లతో కొన్ని విజిబిలిటీ క్లాస్‌లను ఇంటిగ్రేట్ చేద్దాం.
ఉదాహరణ 1: 'అదృశ్య' తరగతిలో హోవర్ స్థితిని వర్తింపజేయడం
ఈ సందర్భంలో, వినియోగదారు కర్సర్ మూలకంపై హోవర్ చేసినప్పుడు ఎంచుకున్న మూలకం దాచబడుతుంది, కోడ్ క్రింద చూపబడింది:
< శరీరం >
< div తరగతి = 'గ్రిడ్ గ్రిడ్-కోల్స్-3 గ్యాప్-4 my-4 mx-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 >
< / శరీరం >
పై కోడ్ యొక్క వివరణ:
- మొదట, పేరెంట్ డివి సృష్టించబడింది, ఇది మూడు నిలువు వరుసల గ్రిడ్ లేఅవుట్‌ని సృష్టించడం ద్వారా ప్రతి నిలువు వరుస మరియు మార్జిన్ మధ్య ఖాళీని కలిగి ఉంటుంది 4px ”. టైల్‌విండ్ CSSని ఉపయోగించడం ' గ్రిడ్ ',' గ్రిడ్-కోల్స్-3 ',' అంతరం ',' నా ', మరియు' mx ”వరుసగా తరగతులు.
- తర్వాత ముగ్గురు పిల్లలు” div ” మూలకాలు సృష్టించబడతాయి మరియు వాటికి ప్రాథమిక స్టైలింగ్ వర్తించబడుతుంది.
- అప్పుడు, ' హోవర్ CSSలో 'స్టేట్ లేదా సెలెక్టర్ రెండవ 'డివి' మరియు 'కి కేటాయించబడింది అదృశ్య 'దీనికి కేటాయించబడింది పెద్దప్రేగు ద్వారా వేరు చేయబడింది' : ” గుర్తు. మౌస్ దానిపై ఉంచినప్పుడు ఇది రెండవ డివిని కనిపించకుండా చేస్తుంది.
అమలు దశ తర్వాత వెబ్‌పేజీ ప్రివ్యూ:
మౌస్ హోవర్‌లో రెండవ డివి కనిపించదు అని పై gif చూపిస్తుంది.
ఉదాహరణ 2: 'అదృశ్య' తరగతితో పాటు క్రియాశీల స్థితిని వర్తింపజేయడం
వినియోగదారు నిర్దిష్ట మూలకాన్ని ఎంచుకున్నప్పుడు మరియు వదిలివేయనప్పుడు 'యాక్టివ్' స్థితి శైలులను వర్తింపజేస్తుంది. వినియోగదారు ఫీల్డ్ లోపల డేటాను నమోదు చేయడం ప్రారంభించినప్పుడు టెక్స్ట్ బాక్స్‌ల వలె, ఈ సమయంలో ఫీల్డ్ సక్రియంగా ఉంటుంది. క్రియాశీల స్థితి మరియు 'అదృశ్య' తరగతితో ఇది ఎలా పని చేస్తుందో మరింత స్పష్టంగా అర్థం చేసుకోవడానికి, దిగువ కోడ్‌ని సందర్శించండి:
< శరీరం >< div తరగతి = 'గ్రిడ్ గ్రిడ్-కోల్స్-3 గ్యాప్-4 my-4 mx-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 ఎలిమెంట్ దాచబడేలా చేస్తుంది.
అమలు చేసిన తర్వాత, వెబ్‌పేజీ ప్రివ్యూ ఇలా కనిపిస్తుంది:
పై అవుట్‌పుట్ రెండవ “div”ని ఎంచుకున్నప్పుడు మూలకం కనిపించదని చూపుతుంది.
ముగింపు
ఎంచుకున్న మూలకాల కోసం దృశ్యమాన లక్షణాలను సవరించడానికి విజిబిలిటీ యుటిలిటీ అందించిన తరగతులతో హోవర్ మరియు యాక్టివ్ లేదా ఫోకస్ వంటి ఇతర స్థితులను ఉపయోగించవచ్చు. '' హోవర్: కనిపించే 'లేదా' హోవర్: అదృశ్య ”. విజిబిలిటీ యుటిలిటీతో హోవర్ స్టేట్‌లను వర్తింపజేసే విధానాన్ని ఈ బ్లాగ్ వివరించింది.