I have the following div on my html page:
<div class="tooltip">
<span>content</span>
</div>
And the following css script:
.tooltip span {
display:none;
}
.tooltip:hover span {
display:inline;
}
Is there a way to make the span stay visible for more 5 seconds after the mouse is out of the div? The reason I'm trying to do this is because this tooltip has some content inside it such as links.
PURE CSS
Sorry, I forgot. Display
doesn't get affected by transitions.
Use opacity
instead.
Use transitions:
.tooltip span {
opacity: 0;
transition: opacity 0s 1s;
}
.tooltip:hover span {
opacity: 1;
transition: opacity 0s;
}
.tooltip span {
opacity: 0;
transition: opacity 0s 5s;
}
.tooltip:hover span {
opacity: 1;
transition: opacity 0s;
}
<div class="tooltip">
<span>content</span>
</div>
If you want it to fade out, use this:
.tooltip span {
opacity: 0;
transition: opacity 0s 5s;
}
.tooltip:hover span {
opacity: 1;
transition: opacity 0s;
}
.tooltip span {
opacity: 0;
border: 1px solid transparent;
transition: all .4s 4.6s;
}
.tooltip:hover span {
opacity: 1;
border: 1px solid #000;
opacity: 1;
transition: all .4s;
}
<div class="tooltip">
<span>content</span>
</div>
UPDATE use all
if you have multiple properties. Note: you generally need have an initial property and a changed property. E.g. See JSFiddle (working)