Sidebox contents hover background colour

[chabbu]

Hi,

I hope some experienced zen-carters can help me. I'd like to have a background colour appear in the catergory listing when it is hovered over in the sidebox only - just like this site: http://shop.technopro.co.za/

I'm using the default installation stylesheet and customising that to my needs but i can't figure out what style controls that.

Please help.

[gjh42]

There is a "pseudo-style" called :hover which causes the behavior you want.

You can add this to the end of any link in your stylesheet, specify the CSS effects desired, and they will be applied on hover. (This is supposed to work on anything, but IE only supports it on links, so there's not much point trying it on anything else.)

You can see an example at the top of a stock stylesheet:

a:link, #navEZPagesTOC ul li a {
	color: #3300FF;
	text-decoration: none;
	}
 
a:visited {
	color: #3300FF;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #FF0000;
	}

Links are blue, recently visited links are also blue, and hovering links are red.

a.category-top is a good place to start for styling category links.
Use

a.category-top:hover {

}

for hover effects.

[chabbu]

Hi,

Thanks, but that does not span the whole width of the catergory sidebox, which is what i want it to do.

it only gives a background colour the width of the text to which it is applied.

[gjh42]

You need to use

display: block;

to get the whole width effect. This by itself will cause an extra space to appear between all your category names. To remove the space, you need to delete a <br /> from the code in tpl_categories.php, which in turn can cause other side effects. (You can eliminate this gap with a margin-bottom: -1.2em; added, but IE6 has a problem with this and displays a semi-random body background stripe below the element. So, it is necessary to use a more brute-force method...)

The Categories Dressing mod takes care of these tasks, and gives directions for styling as you desire.

[chabbu]

Thanks for that, it works but creates a break as you say.

[GLV]

There is a "pseudo-style" called :hover which causes the behavior you want.

You can add this to the end of any link in your stylesheet, specify the CSS effects desired, and they will be applied on hover. (This is supposed to work on anything, but IE only supports it on links, so there's not much point trying it on anything else.)

You can see an example at the top of a stock stylesheet:

a:link, #navEZPagesTOC ul li a {
	color: #3300FF;
	text-decoration: none;
	}
 
a:visited {
	color: #3300FF;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #FF0000;
	}

Links are blue, recently visited links are also blue, and hovering links are red.

a.category-top is a good place to start for styling category links.
Use

a.category-top:hover {

}

for hover effects.

THANK YOU, I was missing the "-top" *sigh* and I went through an hour of fighting with that dressing mod, lol .. thank you, now i did it with 1 line in my CSS instead.

[gjh42]

Yes, there are certain styling effects that can be done fine without Cat Dressing. No need for a shotgun when a BB gun will do the job.

[crabdance]

Yes, there are certain styling effects that can be done fine without Cat Dressing. No need for a shotgun when a BB gun will do the job.

so true, so true... Thank you Glenn for this information. I have learned something new about CSS stuff. I did not know about the "block" command. I was able to add it to my stylesheet_betterCategoriesEZinfo.css file and everything worked great. Things didn't go so good when I put the changes in my stylesheet.css but now everything is working great!

Thanks so much for the info! I now have images with rollover effects now.