CSS rollover nav combining html text w/ graphic

  • f7digitaldesign
  • Newbie
  • Newbie
  • f7digitaldesign
  • Posts: 5

Post 3+ Months Ago

Please see link below:
www(dot)f7digitaldesign(dot)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
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

fairly simple. Set your navbar header text to "display:block" in your css. Then use the pseudo selector ":hover" to set the different state with the graphic and the different color.

I didn't look at your code so you'll have to adjust this to what works for you, but it would basically look like this:

CSS Code: [ Select ]
h3 {
 color: grey;
 display: block;
 width: /*put a width here*/
}
 
h3:hover {
 color: red;
 background: url/to/background.jpg;
 background-position: center right;
}
 
  1. h3 {
  2.  color: grey;
  3.  display: block;
  4.  width: /*put a width here*/
  5. }
  6.  
  7. h3:hover {
  8.  color: red;
  9.  background: url/to/background.jpg;
  10.  background-position: center right;
  11. }
  12.  


That should at least get you on the right track.
  • f7digitaldesign
  • Newbie
  • Newbie
  • f7digitaldesign
  • Posts: 5

Post 3+ Months Ago

Thanks! I didn't try your suggestion, but got this one from another forum and it worked:

One way to do that is to put that image in each of your h3 tags and add this to your CSS:
Code:
.content h3 img {
display:none;
}
.content h3:hover img{
display:inline;
}

Another way is to do a similar thing but use the image as a background image.

The (tiny) problem with both of these is that some older browsers won't be able to handle the :hover on the h3 tag. Modern browsers should be OK.

I hope that helps.

So I did the first suggestion and its working.

thanks!
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

If you're worried about older browsers, you could use javascript instead.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

older browsers do support hover on an anchor tag (<a>) so use mindfulsilence's solution. Its almost exactly the same except it requires a lot less markup and is more likely to work across a lot of browsers.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 51 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.