Doomcat: Created page with "span.hover-target { position: relative; } span.hover-target div.hover-info { /* Do not add any styles that will change the calculated width of the element here;..."

2012-08-10T21:47:23Z

Created page with "span.hover-target { position: relative; } span.hover-target div.hover-info { /* Do not add any styles that will change the calculated width of the element here;..."

New page

span.hover-target {
position: relative;
}
span.hover-target div.hover-info {
/* Do not add any styles that will change the calculated
width of the element here; this includes borders and padding.

This is b/c even though the child will be invisible with a
0px width, if the prior are specified the "edges" would still
be accessible for user interaction. Save these for when the child
is to be displayed */

position: absolute;
left: 5px;
top: 5px;
background-color: #ccc;
color: #ccc;
cursor: pointer;
border: 0px;

width: 0px;
opacity: 0;

/* delay any style changes, other than opacity, that are to take
place when the parent is hovered over. Note that I have specified
a "0s" duration. This means the styles will be applied directly
after the delay expires. This is so the style changes are applied
before the child is to fade in. */
transition: padding,width,border,color 0s linear .5s;
-webkit-transition: padding, width, border, 0s linear .5s;

/* Now that we have the general stylings out of the way, set the
child up so it fades in/out durring transitions */
transition: opacity .5s linear .5s;
-webkit-transition: opacity .5s linear .5s;
}
span.hover-target:hover div.hover-info {
border: 1px solid #000;
padding: 0px 0px 0px 2px;
color: #000;

width: 150px;
opacity: 1;
}

User:Doomcat/vector.css - Revision history

Doomcat: Created page with "span.hover-target { position: relative; } span.hover-target div.hover-info { /* Do not add any styles that will change the calculated width of the element here;..."