DIV Layers

[itgl72]

I'm green when it comes to CSS but I love playing with it so bare with me please. I have in the past had a bunch of divs/layers that would hide/unhide depending on an image link rollover.

What I want to know is if this same effect is possible with out using an image?

Before I had this effect with images as links in a navigation bar. When I rolled over each image for its respected link a layer would show/un hide then go back to the default layer.

I am not sure if this is possible to do with my new project where I am trying to use no images for my navigation area.

Thanks for the ideas.

[VidGa]

If I understand you properly, then the solution is as simple as replacing your <IMG> tag with the relevant text.
There are some quirks to get the same behavior cross-browser, but it's none too tough to figure out with a little experimentation. I actually did something similar recently, so if you find yourself stuck I can try to help you out.
Actually, the theory goes that you can use the :hover pseudo-class on any element, but IE only supports this for links. Work-arounds are easy to come by, though.

Anyway, I hoped that helped.

[itgl72]

If its not too much trouble, would an example of the code be much to ask for please?

Thank you

:)

[mincklerstraat]

Yes - the previous poster notes that :hover as applied to non-links doesn't work in ie, but you're doing navigation with links, so this should work just as well for ie as well. Yes, you can do nifty stuff w/o using images.

<style>
.navbox {
width: 600px;
display: inline;
}
.navbox, .navbox a:link {
background: #eee;
width: 150px;
height: 26px;
}
.navbox a:link, .navbox a:hover {
display: block;
float: left;
text-align: center;
}
.navbox a:hover {
background: #ccc;
color: #333;
width: 144px;
border: 3px double #222;
height: 20px;
}
</style>
<div class="navbox">
<a href="#">One link</a> <a href="#">Another</a> <a href="#">And another</a> <a href="#">Enough?</a>
</div>