Highlighting a table row during hover

R

unread,

Nov 6, 2009, 10:25:06 AM11/6/09

to

Folks,
I've seen it done (though cannot find an example at the moment) - I
want a table row background colour to change when any one cell within
the row has the mouse pointer hovering over it.

Example

<table>
<tr><td>alpha</td><td>apple</td></tr>
<tr><td>bravo</td><td>banana</td></tr>
</table>

If I were to hover the mouse over alpha, I would want the background
colour to alpha and apple to change...

I appreciate the help...

Gordon

unread,

Nov 6, 2009, 11:05:59 AM11/6/09

to

tr:hover in your CSS is how to do it. This, uncurprisingly, won't
work in IE6. If you need it to work in IE6 as well then you will need
to investigate a Javascript solution

Kevin Nathan

unread,

Nov 6, 2009, 11:11:54 AM11/6/09

to

On Fri, 6 Nov 2009 07:25:06 -0800 (PST)
R <fiproje...@gmail.com> wrote:

>Folks,
>I've seen it done (though cannot find an example at the moment) - I
>want a table row background colour to change when any one cell within
>the row has the mouse pointer hovering over it.
>

Put the onmouseover and onmouseout events in the TR tag:

We use two alternating colors for the background and a third for the
highlight on rollover, so it is more complicated, but that should work
for just highlighting... :-)

--
Kevin Nathan (Arizona, USA)
Linux Potpourri and a.o.l.s. FAQ -- (temporarily offline)

Open standards. Open source. Open minds.
The command line is the front line.
Linux 2.6.25.20-0.5-pae
9:06am up 15 days 23:19, 38 users, load average: 0.15, 0.26, 0.44

Andreas Prilop

unread,

Nov 6, 2009, 11:13:09 AM11/6/09

to

On Fri, 6 Nov 2009, R wrote:

> I want a table row background colour to change when any one cell
> within the row has the mouse pointer hovering over it.

tr:hover td { background: yellow }

--
In memoriam Alan J. Flavell
http://groups.google.co.uk/groups/search?q=author:Alan.J.Flavell

R

unread,

Nov 9, 2009, 5:51:58 PM11/9/09

to

Thanks all!

Greatly apprecaited... hadn't thought of setting the class in the <tr>
tag! Silly me! And the onmouse event too is a solution that escaped me
though my intranet based application will be firefox based, its
something I will keep in mind!

Jim Moe

unread,

Nov 10, 2009, 12:47:18 PM11/10/09

to

On 11/06/09 09:13 am, Andreas Prilop wrote:
> On Fri, 6 Nov 2009, R wrote:
>
>> I want a table row background colour to change when any one cell
>> within the row has the mouse pointer hovering over it.
>
> tr:hover td { background: yellow }
>

:hover does not work for IE version 6 and earlier. The only element
where hover was implemented was <a>. Most people have Javascript enabled
so using a onmouseover() event can compensate for IE6.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Gordon

unread,

Nov 11, 2009, 4:20:17 AM11/11/09

to

On Nov 10, 5:47 pm, Jim Moe <jmm-list.AXSPA...@sohnen-moe.com> wrote:
> On 11/06/09 09:13 am, Andreas Prilop wrote:> On Fri, 6 Nov 2009, R wrote:
> :hover does not work for IE version 6 and earlier. The only element
> where hover was implemented was <a>. Most people have Javascript enabled
> so using a onmouseover() event can compensate for IE6.

As CSS provides a mechanism for doing this, I'd tend to prefer the CSS
method. It's not CSS's fault that IE6 doesn't implement it
properly. :) Besides, the more javascript you have on a page the
worse it performs.

If it absolutely must work on IE6, I'd include a javascript for doing
it with the conditional comment mechanism. That way everyone else can
use the CSS approach and only IE6 users get the javascript that nobody
else needs