CODEWITHSUNDEEP
css
Eugenios
Eugenios

Reputation: 11

fade in/out effect on :after & :before element with css

i try to adding to this tooltip: http://jsfiddle.net/anx26/5/ an fade in and fade out effect on hover with pure css.

I have try transition, animations with keyframes but nothing works, any idea?

it could be caused by :after and :before?

Upvotes: 1

Views: 1127

Answers (1)

Different55
Different55

Reputation: 597

In the code you provided, there's nothing to offer a transition. The :after only exists when it's hovered, and it can't transition from not existing to existing.

Remove the :hover from your tooltip's "definition", and instead use :hover ONLY to transition. I'm not sure I'm making any sense here, so here's an example.

What you have:

.tooltip:hover:after { content: 'test'; }

When you hover over your div, :after pops into existence and pops back out the second you stop hovering. No transitions can happen because they're interrupted by the sudden appearance/disappearance of :after from reality.

What you need is something more like this:

.tooltip:after {
   content: 'test'; /* Tooltip exists */
   opacity: 0; /* Tooltip is invisible */
   pointer-events: none; /* Tooltip is unclickable */
   transition: opacity .5s; /* Tooltip visibility will fade */
}

.tooltip:hover:after {
   opacity: 1; /* Tooltip is visible */
   pointer-events: initial; /* Tooltip is clickable */
}

With this, your tooltip always exists, and hovering it just causes it to become visible.

Hope that helped, let me know if I wasn't clear enough.

Upvotes: 1

Related Questions