Pseudo class (anchor) mouseover style

Printable View

05-12-2005, 06:41 AM
wishiwasageek

Pseudo class (anchor) mouseover style

I want the links only in a div called "header" to change the background and text colour on mouseover.

This is my coding in my CSS:

Code:

#header a:link {color: #e76931; text-decoration: none;} /* unvisited link */ #header a:visited {color: black;} /* visited link */ #header a:hover {color: white; background-color:#e76931; text-decoration: underline;} /* mouse over link */ #header a:active {color: #e76931; text-decoration: underline;} h1 { font-family: Tahoma, Verdana, sans-serif; color: #e76931 ; font-weight:heavy; font-size: 12px; padding:5px 0px 0px 0px; text-align:right; line-height:14px; margin:0px;}

And in HTML,

HTML Code:

<a id="header" href="page.htm" alt="Link to page.htm"><h1>SOME TEXT</h1></a>

But in FF when I hover the mouse, nothing happens.
In IE, the link goes orange (#e76931 ) but you can't see the white text.

I'm sure I'm missing something really obvious, but I haven't done this sort of thing for ages.
Do I have to JScript it?

Thanx stax as always.
WIWAG :o
05-12-2005, 07:52 AM
jscheuer1

Well, you have too much going on, active and hover are at odds with each other, the order of the anchor styles is nonstandard, class is superior to id in this kind of situation, the h1 tag is in the wrong place. Alot of that can be fixed. I think I touched all the bases available with this demo:

HTML Code:

<html> <head> <title>CSS Trial</title> <style type="text/css"> a.header:link {color: #e76931; text-decoration: none;} /* unvisited link */ a.header:active {color: #e76931; text-decoration: underline;} a.header:visited {color: black;} /* visited link */ a.header:hover {color: white; background-color:#e76931; text-decoration: underline;} /* mouse over link */ h1 { font-family: Tahoma, Verdana, sans-serif; color: #e76931 ; font-weight:heavy; font-size: 12px; padding:5px 0px 0px 0px; text-align:right; line-height:14px; margin:0px;} </style> </head> <body bgcolor="gold"> <h1><a class="header" href="page.htm" alt="Link to page.htm">SOME TEXT</a></h1> </body> </html>

Hover and active are still at odds but, I don't think that can be resolved, other than that, it works well in both browsers.
05-13-2005, 01:38 AM
wishiwasageek
- yeah, I'm not always clear on that -what's the diff between active and hover? should I just make them be the same? (so they aren't at odds)
- so if you put <h1>outside the anchor, it overwrites the anchor text type? or otherway round? What's the order of applying formatting in this situation?
- and I'm happy to use class not id, but what's the diff in this situation?
(sorry I'm one of those people that likes to know why.)

As always thank-you very muchly for your answer.

WIWAG :o
05-13-2005, 03:08 AM
jscheuer1

I'm generally much bigger on what works than on why but, I'll give it a crack.

Active is roughly equivalent to onmouseDown and encompasses the moments from when the mouse is 'down' on the element until some other significant event takes place. Significant events will vary, I think, depending upon the rest of the page's construction but, generally include mouse up, mouse out and page unload events. Hover is more like onmouseOver and ends onmouseOut and on page unload. Making them the same isn't such a bad idea but, the browser will decide for you, usually favoring hover which should always follow the other pseudo classes in the declarations.

I put h1 outside the anchor tag because if inside yes, it did override the anchor style. Generally, the style of the immediate element prevails, though there is such a thing as inheritance but, that usually occurs only when it is the default setting for a style and there is no other style for that property set for the contained element.

Class versus id. You got me there, id didn't work. I think it may have to do with the fact that id (though widely abused in this fashion wherever browsers will support it) is supposed to be unique to a single element of a single type (ex: one anchor tag on the page), while class can be applied not only to several elements of the same type but also to any element on a page that supports the properties contained within the class definition. This begins to make more sense when you realize that by doing this:

#header a:link

you are creating the context for a unique anchor element that has the general pseudo class attributes you are about to assign to hover. It makes more sense to have:

a:link #header

but, I doubt that is any more valid to the browser. An effective way to use (some say, abuse) id's for these kinds of situations is to create two id's for an element and switch them onmouseOver and onmouseOut. ex:

In the style section -

Code:

#on {background:yellow;color:black} #off {background:white;color:blue}

In the page body -

HTML Code:

<a id="off" href="some.htm" onmouseOver="this.id='on'" onmouseOut="this.id='off'">Click for Some Page</a>

The problem with this is that it requires javascript enabled while, using only css and classes, as in my previous post, does not.
05-13-2005, 11:44 AM
mwinter

Generally you CSS is fine. It is your markup that is the problem: it doesn't match the structure your selectors specify.

Quote:

Originally Posted by wishiwasageek

#header a:link {color: #e76931; [...]

A background colour should always be specified in combination with a foreground colour (and visa versa), even if you just use the inherit or transparent values. I've had a terrible time recently as I use a themed skin in Linux which uses white text. Authors then specify, for example, a white background but assume black text, producing mostly white documents. Nice. :rolleyes:

Quote:

h1 {
/* ... */
font-weight:heavy;

There is no 'heavy' keyword in CSS. You'll probably just want 'bold', but see the font-weight property for a list of valid values.

Quote:

font-size: 12px;

It's a bad idea to specify font sizes in pixel or point units; IE can't resize them. Use percentages instead (preferably going no lower that 85%).

Quote:

line-height:14px;

Similarly with line-height. Use a value proportional to the font size. Perhaps 1.2em.

Quote:

HTML Code:

<a id="header" href="page.htm" alt="Link to page.htm"><h1>SOME TEXT</h1></a>

You said you wanted links within a 'header' div element to have a certain style, but here the link is the 'header' element.

By the way, a h1 element is block-level, whilst an a element is inline. They cannot nest in the way you've presented above.

Quote:

Originally Posted by jscheuer1

active and hover are at odds with each other, the order of the anchor styles is nonstandard

If :active is specified after :hover, it will take precedence. That order is straight out of the specification. The only problem that may result is due to IE's occasional miscalculation of specificity, but a colour change is hardly something to get worked up over. It could be fixed with the !important token if really necessary.

As I said, the problem was with the markup structure, not the CSS. If the markup is actually correct (that is, the a element really is supposed to have the header id attribute value), then change the selectors to #header:link, etc.

Mike
05-26-2005, 04:29 AM
wishiwasageek

Sweet, thanx for your time guys.
WIWAG