asp.net - 悬停时更改表格行样式

Question

我创建了一个没有边框样式的表格，我希望它在悬停时为一行添加下划线。但是，我的行为很奇怪。当我将鼠标倒过来移动时，没有任何反应。在相反的方向，所有触摸的行都带有下划线并保持这种状态，直到我将鼠标移到其他方向。我对此很困惑。为了简单起见，我想远离 jquery，但是使用 jquery 我得到了相同的结果。这是代码..

<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>

以及应用于此 div 的 css:

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;
}

错误的部分:

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

有人看到错误了吗？其他方式？很抱歉发了这么长的帖子。

Answer 1

我知道这是旧的，但它出现在我的 Google 搜索中。浏览器对样式 tr 的支持充其量是可悲的。您的样式需要在 tds 上，例如:

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