CSS Catagories Hover?

21 Feb 2007, 15:04

#1

New Zenner

Join Date:: Nov 2006
Posts:: 81
Plugin Contributions:: 0

CSS Catagories Hover?

I'm trying to create a hover color on the catagories list.

This is what I thought I could do, but I was wrong.
Could someone guide me with this? Not sure if I need to change something else to make it work in the style sheet.

Thank you.

/* categories box parent and child categories */
A.category-top, A.category-top:visited { color: red; font-size: 9pt; font-weight: bold; text-decoration: none }
A.category-top, A.category-top:hover { color: #00008b; font-size: 9pt; font-weight: bold; text-decoration: none }
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited { color: #ff0000; font-weight: bold; text-decoration: none; }

21 Feb 2007, 15:13

#2

afo

Totally Zenned

Join Date:: Aug 2004
Posts:: 6,800
Plugin Contributions:: 0

Re: CSS Catagories Hover?

I'm not 100% sure, but I think you need to make the following changes (the ones in red).

/* categories box parent and child categories */
A.category-top a:visited, A.category-top a:visited{ color: red; font-size: 9pt; font-weight: bold; text-decoration: none }
A.category-top a:hover, A.category-top a:hover{ color: #00008b; font-size: 9pt; font-weight: bold; text-decoration: none }
A.category-subs a:visited, A.category-products a:visited,  A.category-subs a:visited, A.category-products a:visited { color: #ff0000; font-weight: bold; text-decoration: none; }

21 Feb 2007, 15:19

#3

jenbrink_fuse_net

New Zenner

Join Date:: Nov 2006
Posts:: 81
Plugin Contributions:: 0

Re: CSS Catagories Hover?

Thank you, that worked great!

21 Feb 2007, 15:34

#4

afo

Totally Zenned

Join Date:: Aug 2004
Posts:: 6,800
Plugin Contributions:: 0

Re: CSS Catagories Hover?

:clap: I got it right! :lol: I wasn't sure that was the answer, but looking at the other css, it seemed like the way it needed to be done.

Glad it got you going. :thumbsup:

21 Feb 2007, 15:41

#5

jenbrink_fuse_net

New Zenner

Join Date:: Nov 2006
Posts:: 81
Plugin Contributions:: 0

Re: CSS Catagories Hover?

Once I change the code, the hover works but I lost my size of the text and bold.

Hmmm. not sure how that happened.

Would you know why I would loose that?

Also, I notice that my Code color changed. It was blue, now it is Red and Green.
I use Golive. I can change it in the source code view of the style sheet but it does not show up in the list. (CSS Definitions)

Any ideas?

Thanks again for you help!

21 Feb 2007, 16:16

#6

afo

Totally Zenned

Join Date:: Aug 2004
Posts:: 6,800
Plugin Contributions:: 0

Re: CSS Catagories Hover?

Try adding this replacing the color and font size/weight as necessary:

A.category-top a:link, A.category-top a:link{ color: red; font-size: 9pt; font-weight: bold; text-decoration: none }
A.category-subs a:link, A.category-products a:link,  A.category-subs a:link, A.category-products a:link { color: #ff0000; font-weight: bold; text-decoration: none; }

You can also split them up if you want/need to get the desired effect.

Also, on the definition that begins "A.category-subs", you have a font weight, but no font size.

21 Feb 2007, 17:34

#7

jenbrink_fuse_net

New Zenner

Join Date:: Nov 2006
Posts:: 81
Plugin Contributions:: 0

Re: CSS Catagories Hover?

OK.
I've lost my mind now. :wacko:
the catagories weight is back, the size is back, but the hover doesnt work.
Also, the links under the catagories are wacked out. Hover has the large text and the regular link has the small nonbold text.

Here is a link: http://www.spittinimagesonline.com/storefront/

here is what I have nowin the CSS:

/* categories box parent and child categories */
A.category-top, a:visited, A.category-top:a:visited { color: red; font-size: 9pt; font-weight: bold; text-decoration: none   }

A.category-top, a:hover, A.category-top:a:hover { color: #00008b; font-size: 9pt; font-weight: bold; text-decoration: none   }

A.category-subs, a:visited, A.category-products, a:visited, A.category-subs:visited, a:visited, A.category-products:a:visited { color: #09f; font-weight: bold; text-decoration: none; }

21 Feb 2007, 17:44

#8

afo

Totally Zenned

Join Date:: Aug 2004
Posts:: 6,800
Plugin Contributions:: 0

Re: CSS Catagories Hover?

It looks ok to me. What am I missing? Hover goes from blue to red in the sideboxes and the products.

21 Feb 2007, 17:54

#9

jenbrink_fuse_net

New Zenner

Join Date:: Nov 2006
Posts:: 81
Plugin Contributions:: 0

Re: CSS Catagories Hover?

Yeah you are right.

It was my Browser, Safari.
Even clearing cache and refreshing.

Works in Firefox and Netscape.

Thanks for all your help!!

21 Feb 2007, 18:44

#10

afo

Totally Zenned

Join Date:: Aug 2004
Posts:: 6,800
Plugin Contributions:: 0

Re: CSS Catagories Hover?

Excellent! I'm glad you've got things the way you want them. :smile:

21 Feb 2007, 20:13

#11

jenbrink_fuse_net

New Zenner

Join Date:: Nov 2006
Posts:: 81
Plugin Contributions:: 0

Re: CSS Catagories Hover?

Since I made that change, now my CatTabs are not right.
The client wanted them larger, so I changed the #navCatTabs ul li a to 10pt text.
But the hover is smaller.
http://www.spittinimagesonline.com/storefront/

Also:
Is there a way to make the Catagories Larger than the rest of the links?
I looked around in the CSS so much that I think I'm blind to it now.

The client wants the catagories text larger than the other sideboxes text.

It is so hard to see which browser is showing correct. As of now I'm using FireFox.

This is the first time I had problems with Safari showing true with the store.
(I did upgrade my Golive to CS2)

21 Feb 2007, 20:48

#12

jenbrink_fuse_net

New Zenner

Join Date:: Nov 2006
Posts:: 81
Plugin Contributions:: 0

Re: CSS Catagories Hover?

I figured out the CatTab Hover.

split it up in the CSS
a:hover, #navCatTabs ul li a:hover

Still trying to figure out the rest.