473,327 Members | 1,979 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Onmousever through css

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
5 1922
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
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
"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
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
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Jo_Calico | last post by:
I love the Dynamic Drive cross browser marquee script. I'd like to make the text loop immediately after completion, so the beginning runs right after the end (does that make sense?). Could anyone...
7
by: Richard | last post by:
I know I can have like <a href="#" onclick="dothis" onmouseover="dothat"> But how do you properly code two mouseover's in one statement? <a href="#" onmousever="dothis" onmouseover="dothat"> As...
5
by: CartmanCreative | last post by:
I am totally new to Javascript, and would desperately like some help. I have downloaded a Javascript Text Scroller that uses DHTML to scroll text up and down. There are other Java scrollers that do...
1
by: finizaini | last post by:
I'm receiving an "Object Expected" Error (Line:309, Char:0). I'm confused as to what is happening.Also, I can't run this code using other browser such as Fire Fox. Thispage only can view using IE....
14
by: tuananh87vn | last post by:
hi, I see that it's easy to create a navigation like index.php?id=1, index.php?id=2... then you can hide the current part you are in. But I need a further step (as I've seen many), hope it's easy...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.