By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,114 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

Onmousever through css

P: n/a
pd
guys,

i have this table cell which has the following css property,
..testTable TR.even {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: red; BACKGROUND-COLOR:
#edf3fd;
}

now what i want to do is, when the user moves their mouse over this TR
the TR should change background colour.

I have tried,
..testTable:hover TR.even {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: red; BACKGROUND-COLOR:
#edf3fd;
}
but this doesnt work.

i dont want to use javascript, but want to do it using CSS.

any help. thanks.

Feb 25 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Am 26.02.2007 00:45 schrieb pd:
guys,

i have this table cell which has the following css property,
.testTable TR.even {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: red; BACKGROUND-COLOR:
#edf3fd;
}

now what i want to do is, when the user moves their mouse over this TR
the TR should change background colour.

I have tried,
.testTable:hover TR.even {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: red; BACKGROUND-COLOR:
#edf3fd;
}
but this doesnt work.
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.
Feb 26 '07 #2

P: n/a
Scripsit pd:
i have this table cell which has the following css property,
.testTable TR.even {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: red; BACKGROUND-COLOR:
#edf3fd;
}
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.
now what i want to do is, when the user moves their mouse over this TR
the TR should change background colour.

I have tried,
.testTable:hover TR.even {
FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: red; BACKGROUND-COLOR:
#edf3fd;
}
but this doesnt work.
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
:hover except for links.

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; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 26 '07 #3

P: n/a
"Jukka K. Korpela" <jk******@cs.tut.fiwrote in news:m8zEh.3067$xj6.879
@reader1.news.saunalahti.fi:
Setting font-weight looks pointless, and
setting font size to 10 pixels should be declared a crime.
I also read a couple of your replies in other threads regarding fonts.
Can you guide a rookie to a resource on how to correctly apply font-sizes
in css ?
My ignorant guess: Set the font-size to 100% in de body and specify h1, h2
etcetera by percentage ?

TIA
--
Dirk
Feb 26 '07 #4

P: n/a
Scripsit Dirk:
"Jukka K. Korpela" <jk******@cs.tut.fiwrote in
news:m8zEh.3067$xj6.879 @reader1.news.saunalahti.fi:
>Setting font-weight looks pointless, and
setting font size to 10 pixels should be declared a crime.

I also read a couple of your replies in other threads regarding fonts.
Can you guide a rookie to a resource on how to correctly apply
font-sizes in css ?
Well, the FAQ resources might be better than my quick answers, but...
My ignorant guess: Set the font-size to 100% in de body and specify
h1, h2 etcetera by percentage ?
Right. You could also set no font-size for body. Some people think that
setting body { font-size: 100% } or body { font-size: 100.1% } in important
to avoiding some browser bugs. But I guess it mostly results from the idea
that an author _must_ set the font size, even if it means telling the
browser "do whatever you would do if I told you nothing about the overall
font size".

Setting h1,h2 etc. is important, because the defaults are generally not
useful for any particular purpose, though they are not absolutely awful (as
many author-specified font sizes are). Set them all, from h1 to h7, since
you never know when you'll need lower-level headings.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 26 '07 #5

P: n/a
"Jukka K. Korpela" <jk******@cs.tut.fiwrote in
news:Z1*****************@reader1.news.saunalahti.f i:
Scripsit Dirk:
snip
>My ignorant guess: Set the font-size to 100% in the body and specify
h1, h2 etcetera by percentage ?

Right. You could also set no font-size for body. Some people think
that setting body { font-size: 100% } or body { font-size: 100.1% } in
important to avoiding some browser bugs. But I guess it mostly results
from the idea that an author _must_ set the font size, even if it
means telling the browser "do whatever you would do if I told you
nothing about the overall font size".
Thanks for your reply, so setting the font to 100% for the body might not
be necessary, but I guess it doesn't hurt either.
Setting h1,h2 etc. is important, because the defaults are generally
not useful for any particular purpose, though they are not absolutely
awful (as many author-specified font sizes are). Set them all, from h1
to h7, since you never know when you'll need lower-level headings.
I'm still playing with what percentage to set for h1, h2 etcetera, but
I'll figure that out.
Thanks again for replying.

--
Dirk
Feb 26 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.