Topic: CSS hover/popups

I'm trying to do pure CSS popups as explained at http://meyerweb.com/eric/css/edge/popups/demo.html except that I want the box to display over the top of the link/text.  The problem I am having is that when I hover over the link, the span containing information appears, but pushes down content below rather than hovering over the content.

The CSS I am currently using is:

a span {display: none; position: relative;  width: 125px;  
    z-index: 200; opacity: 0.5;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

a:hover span {display: inline;   }


The html is:

<div class='body'>
    <p>
        asdfasdfsadf... <a href="http://127.0.0.1:3000/en/themes/asdfasdf"><img alt="Info" src="/images/info.gif?1176896087" /><span>asdfasdfsadf</span></a>
    </p>
</div>
<div class='header'>
    <h1>
        <a href="http://127.0.0.1:3000/en/themes/Key-Skills">Key Skills</a>       
    </h1>

</div>
<div class='body'>
    <p>
        How to improve your key skills provision.... <a href="http://127.0.0.1:3000/en/themes/Key-Skills"><img alt="Info" src="/images/info.gif?1176896087" /><span>How to improve your key skills provision.</span></a>
    </p>
</div>
<div class='header'>
    <h1>
        <a href="http://127.0.0.1:3000/en/themes/self-assessment">Self Assessment</a>       
    </h1>

</div>
<div class='body'>
    <p>
        A guide to Self Assessment... <a href="http://127.0.0.1:3000/en/themes/self-assessment"><img alt="Info" src="/images/info.gif?1176896087" /><span>A guide to Self Assessment</span></a>
    </p>
</div>


So when you hover over the Info image beside a title it's meant to display the text in the span, overlapping stuff.  It's just not overlapping!

Any idea how I can get this to work properly or what might be preventing it working.  I can include my full css file if need be..

<b>Edit</b> Fixed, I think.  If I use position: absolute with margin-top rather than just top it seems to work.  Now I've just got to get z-index working!  wink

Last edited by Draconid (2007-06-05 09:19:07)

Re: CSS hover/popups

Hi

Looks rather adventurous what you are trying to do tongue

However, you have a position: absolute/relative problem here.

Your generic CSS should look like this:

a span {
  display: none;
  position: ABSOLUTE;
  width: 125px;
  height: 6em; /* not absolutely necessary */
  z-index: 200; /* z-index does not work in IE the way a sane person would like to, thanks M$ */
  opacity: 0.5; /* opacity does not work in FF I think */
}
a:hover span {display: block; }

/*
  Your body/header classes must be position relative for the absolute CSS to use it as container
  also.. you need to leave some space for the absolute div at the bottom if you want to make it exactly the way on your linked web site
*/
.body, .header {
  position: relative;
  padding-bottom: 6em; /* height of the nested a span */
}


If that does not help you, I have a link to a really cool example. It's at my work computer  tho.. so I'll post it later, hehe.

Other than this... bear in mind that doing this sort of CSS works for very specific designs only. Most irritating factor is the z-index issue with IE, but if you or your site visitors can live with that... no problem.

Re: CSS hover/popups

As promised, here is the link to what you are trying to do. A really nice example, too.

Click into the first field of "Field-Hint Behavior" and you'll see the popup.

Last edited by rudionrails (2007-06-18 04:40:30)