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>

css适用于这个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;
}

错误的部分：

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

有人看到错误吗？其他方式？对于这篇长篇文章感到抱歉。

Answer 1

我知道这已经过时了，但它出现在我的谷歌搜索中。浏览器对样式tr的支持充其量是可悲的。你的风格需要在tds上，比如：

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

Answer 2

尝试使用JavaScript onmouseover 和 onmouseout 事件。在这个事件中，只需申请和取消申请你的CSS课程。

Answer 3

这看起来像是chrome中的一个bug。它在Firefox上运行良好，在IE中根本不适用（IE不支持:hover，border-spacing，折叠<tr>的边框，它会一直播放......）

我为Chrome找到了一个简单的解决方法，但只需为所有<tr>添加底部边框：

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

这也可以防止你的行变高和摇晃。

Answer 4

好的，似乎有一个错误：hover伪选择器应用于“tr”。将选择器更改为“#summary td：hover {}”。它应该工作。

Answer 5

要添加的一个注意事项，与其他测试的浏览器不同，它似乎并不广为人知，在tr：hover上应用样式时，chrome会重新绘制ENTIRE表。这可能已在较新版本的chrome中修复

当你有一张大桌子时，这是非常关键的，铬很严重。

此外，我强烈建议在悬停之前在TD上设置相同宽度的边框，并简单地匹配BG颜色，垂直移位就像是可怕的UX。我尝试将TD内部的填充减少1px以考虑边界，但是有一些奇怪的结果（又是讨厌表的另一个原因）

Answer 6

这是使用JQuery定义脚本以更改行样式的方法（您应该定义您的CSS）。的 CSS：

.hovercs { cursor: pointer; background-color: #70C9C4; }

<强> JavaScript的：

$(function () { $(document).on({ mouseenter: function () { $(this).addClass('hovercs'); }, mouseleave: function () { $(this).removeClass('hovercs'); } }, 'tbody tr'); });

$(function () { $(document).on({ mouseenter: function () { $(this).addClass('hovercs'); }, mouseleave: function () { $(this).removeClass('hovercs'); } }, 'tbody tr'); });

.hovercs { cursor: pointer; background-color: #70C9C4; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <style> td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } </style> </head> <body> <table> <tr> <th>Name</th> <th>City</th> <th>Country</th> </tr> <tr> <td>Vipin Yadav</td> <td>Frankfrut</td> <td>Germany</td> </tr> <tr> <td>Ramesh</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Reetika</td> <td>Melbourne</td> <td>Austria</td> </tr> </table> </body> </html>

$(function () { $(document).on({ mouseenter: function () { $(this).addClass('hovercs'); }, mouseleave: function () { $(this).removeClass('hovercs'); } }, 'tbody tr'); });

在悬停时更改表格行样式

6 个答案: