SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Hover Over Tooltip

    I have created a CSS Hover Tooltip feature for a project I'm working on. I've been able to get it working cross-browser, but I had to use an IE hack. Can someone suggest an improvement, or is the way I have it setup good?

    Basically, it's a text link which on hover creates a background image with an image overlaying on top. In front of the text link, defined with a class, is an icon which depicts a camera--which does a rollover when text is hovered.

    HTML:
    HTML Code:
    <p>Beavers and <a class="thumbnail" href="#thumb">Ducks<span><img src="images/Ducks.jpg" width="200" height="200" alt="Quacking Ducks" /><br />Ducks</span></a></p>
    CSS:
    Code:
    * html .thumbnail {
        background-attachment: fixed;
    }
    .thumbnail {
        position: relative;
        z-index: 0;
        padding-left: 17px;
        background: url(../images/icon-camera.gif) left no-repeat;
    }
    .thumbnail:hover {
        z-index: 50;
        background: url(../images/icon-camera-hover.gif) left no-repeat;
    }
    .thumbnail span { 
        position: absolute;
        visibility: hidden;
        left: -1000px;
        width: 330px;
        height: 257px;
        padding: 15px;
        color: #000;
        text-decoration: none;
        font: bold 12px Arial, Helvetica, sans-serif;
        background: url(../images/bg-hover.gif) no-repeat;
    }
    .thumbnail span img { 
        border-width: 0;
    }
    .thumbnail:hover span { 
        visibility: visible;
        left: 5px; 
        top: 18px;
    }
    Thanks

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    background-attachment: fixed doesn't seem right as it's only sposed to work on the body in IE6 anyway. Sounds like you're trying to do a similar thing to this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •