Rollovers within Accordions

Question

I am currently redesigning an existing site that contains a large number of articles. I'd like to cut out a number of intermediate "category" pages within the site by fitting article links within accordions.

However, it is also important to show short descriptions of articles. What I have in mind right now is rollover within the accordions that would show the short description within the accordion when a user mouses over the link.

When I look around for an example of this behaviour, though, I come up short....can anyone point me to an example?

Answer 1

I simply use jQuery's accordion and apply an href style to the actual span so I get this effect:

Is this what you are after? If so here's some markup for you:

<h3><a href="#" class="info">User Documents<span>Print / read manuals on how to use the system.</span></a></h3>

And the CSS for info:

a.info{
    position:relative; /*this is the key*/
    z-index:24;
    color:Navy;
    text-decoration:none;   
}

a.info:hover
{
    z-index:25; 
}

a.info span
{
    display: none;
}

a.info:hover span
{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#377CB1; color:#FFF;
 text-align: center;
}