Why CSS hover is not working all the time?

HTML & CSS
1

Hello,

I want to change the background colors of Table rows when OnMouseOver.
I have defined this CSS for this:

.focus {
font-size: 11px;
}

.focus:hover {
background: #EFF6FF;
}

But when I use this CSS class to affect the change in background color when OnMouseOver,
it works in some Tables and it does not in others.

For example I have the class = “focus” for the rows of the Table in this page:

But when OnMouseOver a given row the background color is not changing.

What is the problem?

Regards,

2

It’s working for me. (Chrome user)

~TehYoyo

Edit: Even though I’m using Chrome, which is a very advanced browser, it shouldn’t affect hovers in any way.

3

It is not working for me. On chrome, FF, or IE.
Some of the places where I have this new class=focus it is working Ok, but some places such as the URL provided above, it is not!
What the HEK is going on?
How to fix this?

4

The problem is taht you placed the hover styles on the <tr> which is always buggy with hover elements :). Do you have to use tables for this? You wouldn’t run into these hover issues if you used non-table HTML (you aren’t displaying tabular data so you shouldn’t even be using a table ;))

5

Yes, I have to have the hover in the tr since I want it to affect all the tds of that tr, so that the user sees that they are on focus on a given tr which has many tds.

And yes, I need to use a Table for various reasons. Please do not start on a lecture about how much better CSS is than Table, I have already heard that many times. But at times, such as this, the Table format is really needed for this Job. So with this said, any suggestion to over come this bug of the Web browsers.

You know the amazing this is that in many Tables this class=focus placed in tr works Ok, but in some Tables such as Table listed above it does not!
What to do!

6

Hmm actually I jsut went to the link above and the tr:hover is working. The background color you set on :hover is really not that dark to be seen. #EFF6FF is a light shade of blue. In the screenshot below, I’m hovering on the 3rd row to illustrate this.

Using FF, though Chrome works too. Is a different color supposed to show up?

7

It wors in all those browsers for me. Have you refreshed the page, cleared the cache etc?

Maybe you could also try

.focus:hover[COLOR="#FF0000"] td[/COLOR] {
  background: none repeat scroll 0 0 #EFF6FF;
}