Why hover is not working

Hello,

We have a Table where we need to highlight a given row when the user holds their mouse over that row.

I have added the CSS code:

.tb_find {
background: #FFFFFF;
}

.tb_find:hover {
background: #C8DAEF;
}

and then added to the
table <tr> definition:

<tr bgcolor=“#ffffff” class=“tb_find”>

however the row is not changing background color when the mouse is held over the row!

What do we need to do to correct this?

Regards,

There isn’t anything wrong from what I can see regarding that CSS :hover selector, so we’d need to see more of the markup and style sheet as it probably has other influences.

[font=verdana]It’s a nice and simple fix – you can’t apply the hover effect background colour to a table row, only a table cell. So just change the line to:

.tb_find:hover td {
	background: #C8DAEF;
}

and you should find it works absolutely fine.

(But why have you declared bgcolor="#ffffff" in the HTML instead of in the CSS?)[/font]

Hello,

Actually I found out that the Hover affect is working fine in many Web browsers, but not on all browser (versions).

So question is what to do to get it working Ok in all browsers?

You can see it by going to anoox.com and issue a search for whatever you want, such as: Web design Miami
Then hold your mouse over each row of the search results.

Depending on your web browser the background color will change fine.

So again question is what to do to get it working Ok in all browsers?

Stevie,

Your suggestion would not work since each row has many columns and the result that we are looking for is when the user holds their mouse over any
column of a row that that row changes background color.

[FONT=Verdana]
ALL is too big a word.

Which versions of which browsers are not working for you?[/FONT]

The following code has been tested and found to WORK in the browsers listed at the top of the page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
tr:hover changes the background-color of the entire row of table cells in the following browsers:
IE8, IE9, FF3.6, FF19.0, Netscape 7.2, Chrome 25.0
-->
<head>
    <title>Table Tester</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

table {
    border:1px solid #000;
    margin:0 auto;
}
td {
    border:1px solid #080;
    background-color:#ccc;
    width:60px;
    height:60px;
}
tr:hover td {
    background-color:#fcc;
}

    </style>
</head>
<body>

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

</body>
</html>


As you can see, Stevie’s code works just fine.

That’s what the code does :slight_smile: When a tr is hovered then all tds in that row change their background colour and will work in all but IE6.

Paul,

I am sorry, maybe I did not quite understand what you meant.
Can you elaborate and give me the full text of your CSS code suggestion.

Regards,

WorldNews, did you try the code that I attached in message number 6 on a stand-alone page? It demonstrates exactly what Stevie and Paul have stated. It doesn’t get any simpler than that.

As @Paul_O_B stated in message number 7, tr:hover does not work in IE6. Is that the problem browser?