User:Doomcat/vector.css

From zoywiki.com
Revision as of 21:47, 10 August 2012 by Doomcat (talk | contribs) (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;...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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;
}