User:Doomcat/common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
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;
}