At 09:23 AM 1/12/2006, Vic Rauch wrote:
>I would like to display one div based on what the mouse is over and hide all
>the rest of the DIVs within a grouping of these DIVs but have no idea how to
>do that. Can someone either give a quick demo and/or point me toward a
>demo/explaination?
Here are two ways to do this:
2) Client-side scripting lets you behaviorally link objects so that
hovering over one does something to another, anywhere on the
page. Scripting solutions are off-topic for this list, so reply
privately if you want pointers.
1) CSS lets us change styling for objects contained by the thing
hovered. To support IE without scripting, we're limited to
a:hover. Here's an example of a block that appears & disappears when
the link is hovered over:
_____________________________
<a href="#">Hover over this link...
<span>and this text appears somewhere</span>
</a>
_____________________________
/* default state is hidden (moved off-screen) */
a span
{
position: absolute;
left: -1000em;
}
/* hover state is visible */
a:hover span
{
left: 100px;
top: 200px;
}
_____________________________
Because the span is absolutely positioned, you can place it anywhere
on the page as long as its ancestor (parent) containers aren't
positioned relatively.
Paul
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
