change table row style on hover

Question

Hi, I created a table without borders styling and I want it to underline a row on hover. However, I am getting pretty odd behaviour. When I move mouse over from upside down, nothing happens. In opposite direction, all touched rows get underlined and stay that way until I move mouse over in some other direction. I am pretty confused by this. I wanted to stay out of jquery for simplicity, but with jquery I get the same result. Here is the code..

<div class="information" >
    <table id="summary" >
    <%
        foreach (KeyValuePair<long, float> pair in sums)
        { %>
            <tr>
                <td class="left" >Automat id: <%= pair.Key%></td>
                <td class="right" ><%= pair.Value%></td>
            </tr>
     <% } %>
    </table>
</div>

And the css applied to this div:

table
{
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    margin-top:.5em;
}

div.information
{
    margin:1em 0;
    padding:1em;
    font-weight:bold;
    text-align: center;
    color:#C80;
    background-color:#FF9;
    border:1px solid #C80;
}

#summary
{
    width: 715px;
    margin-bottom: 5px;
}

.left
{
    text-align: left;
}

.right
{
    text-align: right;
}

And the faulty part:

#summary tr:hover
{
    border-bottom: dotted 1px gray;
}

Anyone sees an error? Another way? And sorry for the long post.

Answer 1

Try using JavaScript onmouseover and onmouseout events. In this events just apply and un-apply your css class.

Answer 2

This looks like a bug in chrome. It works well on Firefox, and not at all in IE.
(IE doesn't support :hover, border-spacing, border for collapsed <tr>s, it goes on and on...)

I've found a simple workaround for Chrome, however - simply add a bottom border for all <tr>s:

#summary tr {
  border-bottom:solid 1px #FF9;
}

This will also keep your rows from changing heights and jiggle.

Answer 3

Ok, there seems to be a bug in the way the :hover pseudoselector is being applied to "tr". Change selector to "#summary td:hover {}". It should work.