ఈ కథనం Tailwind CSSలో అడ్డు వరుస గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి పద్ధతిని ప్రదర్శిస్తుంది.
టైల్‌విండ్‌లోని రో గ్రిడ్‌లో హోవర్‌ని ఎలా అప్లై చేయాలి?
టైల్‌విండ్‌లోని అడ్డు వరుస గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి, HTML ఫైల్‌ను రూపొందించి, ' హోవర్ 'తరగతితో' grid-row-
ఆచరణాత్మక అమలు కోసం అందించిన దశలను చూడండి:
దశ 1: HTML ప్రోగ్రామ్‌లో రో గ్రిడ్‌తో హోవర్ ప్రాపర్టీని ఉపయోగించండి
HTML ప్రోగ్రామ్‌ను సృష్టించండి మరియు 'ని ఉపయోగించండి హోవర్ 'తో ఆస్తి' grid-row-
< శరీరం >
< div తరగతి = 'గ్రిడ్ గ్రిడ్-వరుసలు-3 హోవర్:గ్రిడ్-వరుసలు-5 గ్రిడ్-ఫ్లో-కోల్ గ్యాప్-3 మీ-3 టెక్స్ట్-సెంటర్' >
< div తరగతి = 'bg-teal-500 p-5' > 1 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 2 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 3 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 4 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 5 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 6 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 7 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 8 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 9 < / div >
< div తరగతి = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / శరీరం >
ఇక్కడ, పేరెంట్
- ' గ్రిడ్ ” క్లాస్ గ్రిడ్ లేఅవుట్‌ను రూపొందించడానికి ఉపయోగించబడుతుంది.
- ' గ్రిడ్-వరుసలు-3 ” క్లాస్ గ్రిడ్ 3 సమాన పరిమాణ అడ్డు వరుసలను కలిగి ఉండాలని నిర్దేశిస్తుంది.
- ' హోవర్:గ్రిడ్-వరుసలు-5 ” క్లాస్ గ్రిడ్‌పై మౌస్ హోవర్ చేసినప్పుడు దాన్ని 5 సమాన-పరిమాణ వరుసలుగా మారుస్తుంది.
- ' గ్రిడ్-ఫ్లో-కోల్ ” తరగతి గ్రిడ్ అంశాలను నిలువు వరుసలలో అడ్డంగా ఉంచుతుంది.
- ' ఖాళీ-3 ” తరగతి ప్రతి గ్రిడ్ అంశం మధ్య 3 యూనిట్ల అంతరాన్ని సెట్ చేస్తుంది.
- ' m-3 ” క్లాస్ గ్రిడ్ కంటైనర్ చుట్టూ 3 యూనిట్ల మార్జిన్‌ను వర్తిస్తుంది.
- ' టెక్స్ట్-సెంటర్ ” తరగతి ప్రతి గ్రిడ్ అంశం యొక్క వచనాన్ని మధ్యలో సెట్ చేస్తుంది.
చైల్డ్
- ' ” అనేది గ్రిడ్ అంశాల సంఖ్యను సూచిస్తుంది.
- ' bg-teal-500 ” క్లాస్ టీల్ కలర్‌ని గ్రిడ్ ఐటెమ్‌ల నేపథ్యానికి సెట్ చేస్తుంది.
- ' p-5 ” క్లాస్ చైల్డ్
ఐటెమ్‌లలోని కంటెంట్‌కి 5 యూనిట్ల పాడింగ్‌ని జోడిస్తుంది.దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
అడ్డు వరుస గ్రిడ్‌పై హోవర్ ప్రభావం వర్తింపజేయబడిందని ధృవీకరించడానికి, వెబ్ పేజీని వీక్షించండి మరియు మౌస్‌ను గ్రిడ్ అంశాలపైకి తరలించండి:
ప్రారంభంలో 3 అడ్డు వరుసలు ఉన్నాయని మరియు మౌస్ దానిపై హోవర్ చేసినప్పుడు, అడ్డు వరుసల సంఖ్య 5కి మారిందని గమనించవచ్చు. ఇది వరుస గ్రిడ్‌పై హోవర్ ప్రభావం విజయవంతంగా వర్తించబడిందని సూచిస్తుంది.
ముగింపు
టైల్‌విండ్‌లోని అడ్డు వరుస గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి, 'ని ఉపయోగించండి హోవర్ 'తరగతితో' grid-row-
HTML ప్రోగ్రామ్‌లో యుటిలిటీ. ఇది హోవర్‌లోని అడ్డు వరుసల సంఖ్యను మారుస్తుంది. మార్పులను నిర్ధారించడానికి, వెబ్ HTML పేజీని వీక్షించండి మరియు గ్రిడ్ అంశాలపై మౌస్‌ను ఉంచండి. ఈ కథనం Tailwind CSSలో అడ్డు వరుసల గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేసే పద్ధతిని వివరించింది.