Aquest article exemplificarà el mètode per aplicar 'break-inside' en passar el cursor a Tailwind CSS.
Com aplicar 'break-inside' en Hover a Tailwind?
Per aplicar el 'break-inside' en passar el cursor a Tailwind, utilitzeu la propietat 'hover' amb la utilitat específica 'break-inside' als elements desitjats del programa HTML. A continuació, consulteu la pàgina web per a la verificació.
Per a una demostració pràctica, proveu els passos que s'indiquen a continuació:
Pas 1: utilitzeu la propietat Hover amb la utilitat 'break-inside'.
Creeu un programa HTML i utilitzeu el ' flotar ” propietat amb la utilitat “break-inside” desitjada. Per exemple, hem utilitzat la propietat hover amb el ' trencar dins-evitar-columna ” utilitat per evitar un salt de columna dins de l'element
al passar el cursor:
< cos >
< div classe = 'columnes-2 bg-groc-500' >
< pàg > Hola. Benvingut aquí.... < / pàg >
< pàg classe = 'hover:break-inside-evitar-columna' >
Utilitzeu les utilitats internes per controlar com a
El salt de pàgina o de columna hauria de comportar-se dins d'un element... < / pàg >
< pàg > Més informació sobre Tailwind CSS... < / pàg >
< pàg > Adéu... < / pàg >
< / div >
< / cos >
Aquí:
- “ columnes-2 La classe s'utilitza per dividir el en dues columnes.
- “ bg-groc-500 ” La classe estableix el color groc al fons del
.- “ hover:break-inside-evitar-columna ” de l'element
indica que quan el punter del ratolí passa per sobre, s'ha d'evitar el salt de columna dins de l'element
.
Pas 2: verifiqueu la sortida
Per verificar si la utilitat 'break-inside-avoid-column' s'ha aplicat correctament al passar el cursor, visualitzeu la pàgina web HTML:
La sortida anterior mostra que quan l'usuari va passar el cursor per sobre de l'element desitjat, s'ha evitat el trencament de columna dins de l'element. Això indica que s'ha aplicat correctament la 'columna break-inside-evitar' a l'element en passar el cursor segons el qual s'ha especificat.
Conclusió
Per aplicar el 'break-inside' en passar el cursor a Tailwind, utilitzeu el ' flotar ' propietat amb el ' desitjat ' trencar dins ” al programa HTML. La propietat hover es pot utilitzar amb qualsevol element. Per a la verificació, consulteu la pàgina web. Aquest article ha explicat el mètode per aplicar el 'break-inside' en passar el cursor a Tailwind CSS.
- “ bg-groc-500 ” La classe estableix el color groc al fons del