ఈ కథనం టైల్‌విండ్‌లో బాక్స్ అలంకరణతో హోవర్‌ని వర్తించే విధానాన్ని ప్రదర్శిస్తుంది.
టైల్‌విండ్‌లో బాక్స్ డెకరేషన్ బ్రేక్‌పై హోవర్‌ను ఎలా అప్లై చేయాలి?
'బాక్స్-డెకరేషన్-బ్రేక్' CSS ప్రాపర్టీ ఒక మూలకం బహుళ పంక్తులు లేదా నిలువు వరుసలలో విస్తరించినప్పుడు దాని నేపథ్యం, సరిహద్దు మరియు పాడింగ్ యొక్క రెండరింగ్‌ను నిర్ణయిస్తుంది. బాక్స్ డెకరేషన్ బ్రేక్ ఎలిమెంట్స్‌పై హోవర్ ఎఫెక్ట్‌ని వర్తింపజేయడానికి, ''ని ఉపయోగించడం అవసరం హోవర్ ” ఆస్తి మరియు మూలకాలకు ఏదైనా ప్రభావాన్ని వర్తింపజేయండి.
ఆచరణాత్మక ప్రదర్శన కోసం దిగువ అందించిన దశలను చూడండి:
దశ 1: HTML ప్రోగ్రామ్‌లో బాక్స్ డెకరేషన్ బ్రేక్‌పై హోవర్ ప్రాపర్టీని ఉపయోగించండి
HTML ప్రోగ్రామ్‌ను సృష్టించండి మరియు బాక్స్ డెకరేషన్ బ్రేక్ ఎలిమెంట్‌లపై ఏదైనా హోవర్ ప్రాపర్టీని ఉపయోగించండి. ఉదాహరణకు, మేము దరఖాస్తు చేసాము ' హోవర్: బాక్స్-డెకరేషన్-క్లోన్ 'బాక్స్ డెకరేషన్-స్లైస్' ఎలిమెంట్ మరియు ఒక 'పై ఆస్తి హోవర్: టెక్స్ట్-పసుపు-500 'బాక్స్-డెకరేషన్-క్లోన్' మూలకంపై ఆస్తి:
< శరీరం >
< వ్యవధి తరగతి = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
సూచన
< / వ్యవధి >
< br >
< br >
< వ్యవధి తరగతి = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
సూచన
< / వ్యవధి >
< / శరీరం >
ఇక్కడ:
- ది ' హోవర్: బాక్స్-డెకరేషన్-క్లోన్ 'బాక్స్ డెకరేషన్-స్లైస్' ఎలిమెంట్ మీద హోవర్ చేసినప్పుడు 'బాక్స్-డెకరేషన్-క్లోన్' ఎఫెక్ట్ వర్తిస్తుంది.
- ది ' హోవర్: టెక్స్ట్-పసుపు-500 'బాక్స్-డెకరేషన్-క్లోన్' ఎలిమెంట్ మీద హోవర్ చేసినప్పుడు టెక్స్ట్ రంగును పసుపు రంగులోకి మారుస్తుంది.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
అవుట్‌పుట్‌ని ధృవీకరించడానికి HTML ప్రోగ్రామ్‌ను అమలు చేయండి:
పైన పేర్కొన్న అవుట్‌పుట్, హోవర్ ప్రభావం పేర్కొన్న అంశాలకు వర్తించబడిందని చూపిస్తుంది.
ముగింపు
Tailwind CSS ఏదైనా మూలకంపై హోవర్ ప్రభావాలను వర్తింపజేయడానికి యుటిలిటీ తరగతుల సేకరణను అందిస్తుంది. బాక్స్ డెకరేషన్ బ్రేక్ ఎలిమెంట్స్‌పై హోవర్‌ని వర్తింపజేయడానికి, 'ని ఉపయోగించండి హోవర్ ” ఆస్తి మరియు HTML ప్రోగ్రామ్‌లో ప్రభావాన్ని పేర్కొనండి. వినియోగదారులు నేపథ్య రంగు, వచన రంగు మరియు అంచు రంగును మార్చవచ్చు లేదా హోవర్‌లోని మూలకానికి నీడను జోడించవచ్చు. ఈ కథనం టైల్‌విండ్‌లో బాక్స్ అలంకరణతో హోవర్‌ని వర్తించే విధానాన్ని వివరించింది.