CSS based hover effect menu quandry

[gorilla1]

I am trying to create a menu where as you rollover each item the text color and background color change. I want each item in the menu to be a conventional html anchor tag (a href="whatever.html"). I dont care that NS4 will just show the items as links and no color change will occur - that is fine. I also want to be able to display the menu in either vertical or horizontal format.

So I set it up using a table, with each td holding a link, and for the horizontal menu all the td's were in one tr, whereas for the vertical menu, each td was contained in a separate tr. I used CSS and hover class. This works fine, except that the background color change only extends to the text area, not the entire table cell. If I assign class change to mouse events in the table elements, then the cell background changes except for the text area, which still will not change until hovered over.

Is there a way to make this work?

G

[joh6nn]

try not assigning a background color to the links. that way, they'll inherit the background color of the table cell, and change when the color of the cell changes. i think

[gorilla1]

Thanks, Joh6nn - that's very close. However, while the background comes up right that way, the text still won't change until hovered. So for mouseover of that portion of the cell that the text does not reach, the effect is not right (if the background color is changing to a dark color, the text will simply disappear).... Close, though - thanks.

One approach I see elsewhere is to fill the cell with spaces - for instance the horizontal menu example on this page:

http://www.webreference.com/dhtml/diner/hover/hover2.html

Still, that won't really cut it if you want say even spacing of the menu items.

G

[gorilla1]

I guess this can be solved if there is a way to gracefully fill the td with spaces, or transparent gif?...

By the way, a popular approach to handling this when doing the vertically oriented menu is to used div with display:block. In which case, the spacer thing is not an issue. However, this approach renders in NS4 not as a vertical list of links with no hover effect, but as a paragraph list of links. That does not cut it imo (other than for specialized purposes where you can say to 'ell with the NS viewers).

G

[joh6nn]

what if you made the link in the cell plain text, and then created the link, by adding an onClick event to the cell. then, you could change the mouseover, to change the 'background-color' of the cell, and the 'color' ( text color ) of the cell.

[gorilla1]

joh6nn, Thanks again - Yes, that works very well. In fact, Adios coded up a very elegant routine to accomplish exactly that in the old forum. An essential part of it is that you need to take care of the NS4 aspects then, because otherwise you will not have an approach that is still functional in NS4 (Adios' code handled this, too). One concern I have with that approach is that I have heard that search engines require conventional links. Is this so, or just an old wive's tale?

G

[joh6nn]

that's true, though i believe there are ways to get search engines to index sub pages anyway. it's really not the route i'd suggest in this case, though.

a perhaps simpler route, would be the following, which just occured to me:

a {
display: block;
width: 100%;
height: 100%;
color: #FF00FF;
background-color: #0000FF;
}

a: hover {
display: block;
width: 100%;
height: 100%;
color: #0000FF;
background-color: #FF00FF;
}

by changing the links display to 'block', you can give it width and height. it won't work in NS4, but you weren't expecting it to anyway.

[gorilla1]

Wow. That is pretty spectacular. The effect works in IE, while in NS4 the links show up fine. Perfect. Thanks.

G

[gorilla1]

I guess I spoke too soon. In a menu of 4 links under NS4, the first and fourth are colored (green) in accordance with the class:
.menu1 A {
color: #003300;

but the 2nd and 3rd show up maroon, following the link coloring defined for the body. In IE, everything works fine. I monkied around with it, and which link is colored which way varies in NS4, but consistently at least one link does not observe the menu class. Here is how the menu is coded:

<tr class="menu1">

<td width="140" height="24">
<a href="www.html">www</a></td>
<td> | </td>

<td width="140" height="24">
<a href="xxx.html">xxx</a></td>
<td> | </td>

<td width="140" height="24">
<a href="yyy.html">yyy</a></td>
<td> | </td>

<td width="140" height="24">
<a href="zzz.html">zzz</a></td>
</tr>

G

[joh6nn]

i'm told, though i don't know for sure, that the position of styles within in the style sheet, effects their cascade.

try moving the definition for the class, above the definition for normal links.

[gorilla1]

Nice idea. I tried it, moving the body attributes from the body tag into the CSS file. I tried placing the body definition both before and after those for the menu, but same result... I wonder why NS4 renders some based on the menu class and some on the body tag? If it simply ingored the menu class and based them all on the body attribute, even that would be ok - but mixed colors is no good.

G

[joh6nn]

then try being more 'specific'. eg:

.className a{
some-style: #FF0000;
}

the more specific a style is, the more weight it carries.

[gorilla1]

joh6nn,

Thanks again. I'm not sure what you mean by more 'specific'. Is there something more specific than "background"? Or maybe you mean more specific relative to the pseudo-class? ... But I did find something that cleaned it up. When I tried your block suggestion,
suddenly in NS4 the text after each link spilled over into a second line. So I assumed that this meant the table needed to be wider and I put a more generous width value into the table tag. I just removed the width value, and now I again get the spill over into two lines in NS4, but at least it observes the color coded in the CSS class. There is probably some way to get the spill over into the second line cleaned up, but I can live with it even if there is not. I suspect the number of NS4 users is pretty small.

Thanks for all the help.

G

[joh6nn]

when i said 'more specific', i meant specific as in how you refer to elements on a page. it has to do with the inheritance scheme in CSS. if you refer to a class of elements, then you're not be very specific. it could be any old object, as long as it fits the class. so it will inherit values from that class, but those values can be overridden, by something more specific. for example, setting up a context of elements. like a table cell with a span in it:

td span {
// stuff ;
}

the most specific you can be, is to use an id ( or to use the style attribute of an element, inline. ie, STYLE="").

so, i'm thinking, by being more specific in your style definitions, eg .classname a{..., you'll take care of the problem.

[gorilla1]

Ah, ok, I follow.

G