CSS:hover on individual menu items

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:52

CSS:hover on individual menu items

Poster: arkeo
Dated: Tuesday March 1 2005 - 15:36:28 GMT

Is there a way to put call different CSS classes for individual menu items? I've read through the instructions for applying CSS to a menu, but it seems like you can only style menu sections. The only way I have been able to do it is by placing HTML in the text attribute. I tried onclass and offclass, but apparently those only work in the style attribute to style an entire menu section.

On a site we're updating, we have a stylesheet switcher controlled by a drop-down menu. What I'm trying to do is apply a class to each item, so they'll appear different depending on which stylesheet is selected.

I've put <div> tags with class calls around the items and that's working to style individual items, but I can't get the hover state to work in any browser. In FF, it flickers briefly when I try to target the hover state. What can I target in the stylesheet to control these attributes?

Thanks,

Jonathan Jeter
Web Developer
Arkéo, Inc.
Fort Worth, Texas
http://www.arkeo.com

Poster: Ruth
Dated: Tuesday March 1 2005 - 20:32:00 GMT

You should be able to create a class and call it in the menu item. If you are asking about having some function or such which will read on which item you're doing the mouseOver and then assign a color, I don't know that you can do that, or rather I think it would take a function which uses the internals of the menu program to be able to do it.

This is something I created to test some class someplace: put this in the head of your document [I guess you put it in a style sheet]

Code:

.mainOn1{background-color: #ff0000;border:2px dotted #33FF00;font-size:18px;font-weight:bold;text-decoration:overline underline;

Then pick an item and put this in the aI string

Code:

aI("text=whatever;onclass=mainOn1;url=whatever;");

Putting your text and url for the whatever. When you mouseover that item you should have red onbgcolor, a lime border 2px and dotted and font size 18px, bold. I just tried and it works in IE5.5, Netscape6, 7, Firefox .07 [oldversion] and Netscape 4x ignores the class of course.

Ruth

Multiple CSS Selectors

Poster: arkeo
Dated: Tuesday March 1 2005 - 20:53:08 GMT

Thanks.

CORRECTION: In this message, I previously stated the following.

Quote:

I guess the reason it wasn't working was that I was trying to use multiple CSS class selectors and that must have messed it up:

That is incorrect. What was really happening was that I had failed to remove some of the global style properties, so it seemed like the class calls weren't working.

TIP: When using CSS, make sure you eliminate any global style calls that you are trying to overwrite in the stylesheet. The following code, with multiple class selectors works fine, as long as long as you are not trying to call the same style function from the style sheet and the menu style function.

Code:

with(milonic=new menuname("TextSize")){
style=menuStyle;
top=10;
left=5;
menuwidth=120;
aI("text=Default;onclass=selectText normal;offclass=selectText normal over;clickfunction=setActiveStyleSheet('normal');url=;");
aI("text=Large;onclass=selectText large;offclass=selectText large over;clickfunction=setActiveStyleSheet('large');url=;");
aI("text=Larger;onclass=selectText larger;offclass=selectText larger over;clickfunction=setActiveStyleSheet('larger');url=;");
aI("text=Largest;onclass=selectText largest;offclass=selectText largest over;clickfunction=setActiveStyleSheet('largest');url=;");
aI("text=HUGE;onclass=selectText HUGE;offclass=selectText HUGE over;clickfunction=setActiveStyleSheet('HUGE');url=;");
}

What I've learned - When using CSS for the menu, pay close attention to the items in the menuStyle definition. You may still want to use some of them (border, align, etc.), but make sure you're not calling the same style from both places, the menu code will win!

Industrial Strength JavaScript and DHTML Menus

CSS:hover on individual menu items

Multiple CSS Selectors