LaraBABA's avatar

Tailwind question on hover beofre and after

Hi all,

I would like to know if Tailwind has a before and after state when moving the mouse in and out on an element please.

I have tried this but only the hover "on" works, not the hover "out"

<div class="hover:before:animate-fade-in hover:after:animate-fade-out">Hello Laracast!</div>

Tailwind config:

 keyframes: {
            'fade-in': {
                '0%': {
                    opacity: '0',
                },
                '100%': {
                    opacity: '1',
                },
            },
            'fade-out': {
                '100%': {
                    opacity: '1',
                },
                '0%': {
                    opacity: '0',
                },
            },
        },
        animation: {
            'fade-in': 'fade-in 1s',
            'fade-out': 'fade-out 1s',
        },
        },

Any idea why there is no hover-out state please?

Thank you.

0 likes
11 replies
LaraBABA's avatar

@Sinnbeck Thanks. This will not work because as soon as you move away your mouse cursor off the element, you cannot get an "inverse effect". eg: You move your cursor, you get a fade-In, you move it out, you get a fade-Out.

I really thought I could achieve this with Tailwind but it looks like not :-)

Sinnbeck's avatar

@LaraBABA Not quite sure what you mean with the inverse effect? When I move my mouse away from the green box it fades out.

Also be aware that tailwind is css only. So it cannot do anything plain css cant do.

1 like
LaraBABA's avatar

@Sinnbeck But it fades out with animations associated with it? eg: Fade out with a duration of 1000ms or fade out with a rotation?

It is strange, I cannot get this to work, I can get the fadeIn on hover but nothing happens when I move my mouse away from the element apart that it simply resets itself to its position(without animations). Very weird....

Sinnbeck's avatar

@LaraBABA No rotatation as its only opacity we change. But I can see it fade out to white over 700ms

I made an example that fades a lot slower (3 seconds). Dont you see it fade here either? The hover box is right next to the Tiny icon https://play.tailwindcss.com/OBzhhNlMzo

Did you try another browser?

1 like
LaraBABA's avatar

@Sinnbeck Dang you are right!.....I am not understanding why I am struggling on this, lol......scratching my head..... I must have something wrong in my config.......hahaha.

Thank you so much. Just going to make some coffee and check it again in 20 min with a fresh mind! I will add your answer as correct as you demonstrated that it works!

Gracias Amigos and enjoy your weekend!

thinkverse's avatar

the mouse in and out on an element

That will be difficult to do with CSS considering no such selectors exists. They do exist on JavaScript as the events mouseenter, mouseleave, and mouseout.

1 like
LaraBABA's avatar

@thinkverse Thanks, I am really surprised about this to be honest. But it looks like you are right. It is not out of the box with CSS.

Please or to participate in this conversation.