PDA

View Full Version : CSS rollover nav combining html text w/ graphic



f7brian
Jan 18th, 2010, 12:19 AM
Please see link below:

http://www.f7digitaldesign.com/isaac/index-test.html

Notice the secondary nav below the picture on the right. What I want to do is keep the grey subheads as html text and have them go red on hover but I also want a little red graphic to pop on next to the red text on hover (like shown on the first one "Apparel Design"-but it would only be there on hover). I can't think of a way to set this up w/o making all the navigation pure images, any ideas how to do this? Is it even possible?

Thanks!
F7Brian

Excavator
Jan 18th, 2010, 01:32 AM
Hello f7brian,
This might be a start for you. I didn't do the whole thing but you'll get the idea -
.content h3 a {
color:#999;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:16px;
margin-top:22px;
text-decoration:none;
}

.content h3 a:hover {background:url(/images/shape.gif);
color:#F00;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:16px;
margin-top:22px;
}
.content h3 span.bar {display:none;}
.content h3 a:hover span.bar {display:block;}



<div class="content">
<div class="fright"><img src="isaac_charles_site/images/home_image.gif">
<span style="padding-top: 20px;">

<h3><a href="/apparel.html">Apparel Design <span class="bar"><img src="isaac_charles_site/images/shape.gif"></span></a></h3></span>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h5>

<h3><a href="/product.html">Product Design</a> </h3>
<h5>Lorem ipsum dolor sit amet, adipiscing elit. </h5>

I'm not even sure a span in a heading tag that's in a span is even valid. You might want to look at tidying that up a bit. The span.bar is the trick though, hide it until the anchor is hovered.

f7brian
Jan 18th, 2010, 05:11 AM
Thank you very much! That is a great little trick. That extra span wasn't right anyway - (got rid of it)
So your code worked! --the only thing is that when the little graphic is revealed on mouse over it gets kicked down below the text like there's a break! But that gets me very close.

Any further ideas on how to remedy?

I uploaded the latest...
http://www.f7digitaldesign.com/isaac/index-test.html
Thanks again!

F7Brian

f7brian
Jan 18th, 2010, 05:31 AM
Never mind! I got a different suggestion from another forum and it is working!!

the CSS code change was:

.content h3 img {
display:none;
}
.content h3:hover img{
display:inline;
}

seemed really simple and so far it works. The person did warn me that older browsers might have trouble with it so I may not be done with this, but for now..

But if you know how to get the other way to work w/o the break that may be a good thing to know for a back up..

SEE:
http://www.f7digitaldesign.com/isaac/index-test1.html
for latest.

Thx,
F7Brian