hover and divs

[virtual_odin]

I am designing a site with a dynamic navigation pane/list down the left side. I could call it a menu, but it will be more sophisticated that that name would imply. The navigation pane/list is dynamic in two senses. First there are five for the user to choose. And second the items are drawn from my database and will be different for different users, eg documents accessible to that user, or other users on line and so on. Here is a screen print of the document navigation one.

[img src=\"http://soane.net/menu.png\" border=\"0\" alt=\"IPB Image\" /]

I can manage all of this interactivity with php and mysql. Click the relevant button in the top pane and the relevant pane/list appears below. The links in that pane/list then give the user the relevant control over the rest of the page. I do not want to use javascript. CSS feels right.

So here's the CSS issue: I want to load all five panes/lists and using CSS make the active one visible and hide the others. I can do that: I have two div styles - one for display and one for hidden. But I want the style for the buttons such that when the user hovers over each of the buttons at the top, the div style of the relevant pane/list is changed to display and therefore diplayed temporarily so the user can see what he/she would get if he/she went on to click the button.

So, in essence, can a 'hover' property in the style for each button determine whether another style element is displayed or hidden. Feels like it must be possible, but it's not in my toolbox right now. Your suggestions gratefully received.

[moberemk]

Sorry, but there is no way to do that completely with CSS, as far as I know. You'll just have to use a few lines of Javascript.

[khendar]

There is a way to do this - although its a little tricky to get working. I used it for tooltips popups:

Use this code for the various buttons:

[code]
<a href="#" class="info">
Button1
<span>Test Content 1</span>
</a>
<a href="#" class="info">
Button2
<span style="left:-2.5em">Test Content 2</span>
</a>
etc (replace Button1 etc with image buttons or whatever you are using)
[/code]

And the CSS is:

[code]
.info{
position:relative; /*this is the key*/
z-index:24;
border:0px;
color:#000;
text-decoration:none;
}

a.info{
position:relative; /*this is the key*/
z-index:24;
padding:0px;
color:#000;
text-decoration:none
}

a.info:hover{
z-index:25;
border:0px solid black;
}

a.info span{
display: none
}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:0em; width:10em; height:100em;
border:1px solid #000;
background-color:#eee; color:#111;
text-align: center;
font-size:80%;
padding:5px;
}
[/code]

You'll need to play around with the positioning of the popup boxes. At the moment the positioning is relative to the button.

[moberemk]

But he isn't asking for popups. He's looking for a menu hover.
The problem with your solution is that, as soon as you stop hovering over the box (say, to click a link inside) it vanishes because of the gap between the content pane and the button. You would need to have the two objects become practically the same for this to work.

[khendar]

Read his post again:

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]But I want the style for the buttons such that when the user hovers over each of the buttons at the top, the div style of the relevant pane/list is changed to display and therefore [b]diplayed temporarily so the user can see what he/she would get if he/she went on to click the button[/b].[/quote]

[moberemk]

Ooh... Now I feel like a moron. Thanks for pointing that out.

[khendar]

Lol no problems :P

[virtual_odin]

Many thanks khendar. Just what I needed. Works a treat.

[khendar]

No probs. Anything for another Tim :D