Webmaster Forum / HTML, CSS, Scripts / CSS / February 2007

Am 26.02.2007 00:45  schrieb pd:

If you want to change the background color, you should provide a
different one. As long as you define the exact same one for the :hover
selector and the normale behaviour, you can't expect to see any
difference.

Scripsit pd:

It's not a table cell, and what you quote is a rule, not a property. Most
importantly, you didn't include a URL. Please post the URL of the page when
you have CSS problems with a page.

The CSS code looks like munged by some Microsoft software that just can't
let code stand without transmogrification. SHOUTING in property names is a
bad habit, though formally correct. Setting font-weight looks pointless, and
setting font size to 10 pixels should be declared a crime. And it's simpler
to set background: #edf3fd, which also sets background-image to none, which
is a somewhat theoretical, yet easy, precaution against other style sheets
that might set a background image against which your text color is not
legible.

Since the rule is exactly the same as above, except for the :hover part, I
presume that you actually want to _replace_ the first rule by a similar rule
that only applies in the onmouseover, or "hovered", state. In that case
you're on the right track, but there are many issues to be considered.

First, you need a browser that supports :hover fairly well. IE 6 won't do,
for example, so you should not rely on the onmouseover effect for anything
_essential_, in WWW authoring. You would actually get better browser
coverage by using JavaScript instead.

If you test the code on IE 7, make sure you have a correct DOCTYPE
declaration, since otherwise IE 7 simulates many of the errors and
deficiencies of IE 5 and does not, for example, recognize the pseudo-class

Then you need to take into account that TR refers to a row of a table, not a
single cell. I assume you want to affect the row appearance (which basically
means affecting all cells in the row).

Finally, with these reservations, your code has the effect of changing the
row appearance when the _table_ is moused over. This might be what you mean,
but if you really want to affect the row only when the row itself is moused
over, use eg.

.testTable tr.even:hover { color: red; background: #edf3fd; }