ఈ కథనం Tailwind CSSలో కాలమ్ గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేసే పద్ధతిని ప్రదర్శిస్తుంది.
టైల్‌విండ్‌లోని కాలమ్ గ్రిడ్‌లో హోవర్‌ని ఎలా దరఖాస్తు చేయాలి?
టైల్‌విండ్‌లోని కాలమ్ గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి, HTML ఫైల్‌ను తయారు చేసి, ' హోవర్ 'తరగతితో' grid-cols-
ఆచరణాత్మక అమలు కోసం అందించిన దశలను అనుసరించండి:
దశ 1: HTML ప్రోగ్రామ్‌లో కాలమ్ గ్రిడ్‌తో హోవర్ ప్రాపర్టీని ఉపయోగించండి
HTML ప్రోగ్రామ్‌ను సృష్టించండి మరియు 'ని ఉపయోగించండి హోవర్ 'తో ఆస్తి' grid-cols-
< శరీరం >
< 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: అవుట్‌పుట్‌ని ధృవీకరించండి
కాలమ్ గ్రిడ్‌పై హోవర్ ప్రభావం వర్తింపజేయబడిందని నిర్ధారించుకోవడానికి, వెబ్ పేజీని వీక్షించండి మరియు గ్రిడ్ అంశాలపై మౌస్‌ను తరలించండి:
గ్రిడ్ అంశం మీద మౌస్ హోవర్ చేసినప్పుడు, నిలువు వరుసల సంఖ్య మారుతుందని చూడవచ్చు. కాలమ్ గ్రిడ్‌పై హోవర్ ప్రభావం విజయవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది.
ముగింపు
టైల్‌విండ్‌లోని కాలమ్ గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేయడానికి, “ని ఉపయోగించండి హోవర్ 'తరగతితో' grid-cols-
HTML ప్రోగ్రామ్‌లో యుటిలిటీ. ఇది హోవర్‌లోని నిలువు వరుసల సంఖ్యను మారుస్తుంది. మార్పులను నిర్ధారించడానికి, వెబ్ HTML పేజీని వీక్షించండి మరియు గ్రిడ్ ఐటెమ్‌లపై మౌస్‌ని ఉంచండి. ఈ కథనం Tailwind CSSలో కాలమ్ గ్రిడ్‌పై హోవర్ ప్రభావాన్ని వర్తింపజేసే పద్ధతిని ప్రదర్శించింది.