tr: hover

[golles]

Hee,

 

I made a nice php script that loads some tables from an other website.

now I'm having trouble with the tr: hover. in the rows are 3 td's with a class (tbl) and they don't hover with the row

 

Piece of the css

td.tbl {
border-right-width: 1px;
background-color: #f7f7f7;
}

.standen tr:hover {
background-color: #FFFF00;
}

 

here is the table

 

Hope someone can help me out!

[jcombs_31]

The tr hover is working, but you are defining the td to a different color, so to me it appears to function as it should unless I'm missing something. 

[haku]

That's exactly what it is. You will have to take the color setting off the tds that aren't working.

[golles]

I was allready thinking something like that...

But there should be a way (CSS) to do this (also hover the td's with a bg color)?

[haku]

You are using a CSS method already. But TD coloring will overpower TR coloring. It's the CSS way.

 

 

[golles]

You are using a CSS method already. But TD coloring will overpower TR coloring. It's the CSS way.

 

 

okee, thank you all

[Goafer]

1 more thing, isn't it browser specific?

IE doesn't render pseudo class' properly as far as I recall?

which means that tr:hover won't work in IE (unless it's 7.0 or above?????)

[jackpf]

1 more thing, isn't it browser specific?

IE doesn't render pseudo class' properly as far as I recall?

which means that tr:hover won't work in IE (unless it's 7.0 or above?????)

 

Just checked it in IE6- doesnt work at all 

 

You could use javascript to accomplish the same effects.

[jcombs_31]

1 more thing, isn't it browser specific?

IE doesn't render pseudo class' properly as far as I recall?

which means that tr:hover won't work in IE (unless it's 7.0 or above?????)

 

That is correct but I don't think it is really a big deal. IE6 users will just lose out on a little highlighting.  As stated, you can fix this with javascript but I personally wouldn't bother.

[TheFilmGod]

In CSS 2.1, the td.tbl will take precedence over any tr:hover effect. TD's literally overlay over TR's. One method is to delete the background-color declaration in td.tbl entirely.

 

Method number two is a bit more advanced. Nonetheless it is compatible across all modern browsers. I don't consider IE6 modern (IE7+).

 

.standen tr:hover td.tbl {
background-color: #FFFF00;
}

[golles]

In CSS 2.1, the td.tbl will take precedence over any tr:hover effect. TD's literally overlay over TR's. One method is to delete the background-color declaration in td.tbl entirely.

 

Method number two is a bit more advanced. Nonetheless it is compatible across all modern browsers. I don't consider IE6 modern (IE7+).

 

.standen tr:hover td.tbl {
background-color: #FFFF00;
}

 

I knew it should be posible!

 

you're my hero

 

 

now I came with the idea to do a crosshair hover.

I'll post in the javascript forums

 

for someone who is interested

[TheFilmGod]

I'm glad it worked.